重写 CSS 使用媒体查询斗争

Question

我一直在网络上进行高低搜索，尤其是在 Stack Overflow 上，但在使用 @media queries.

覆盖我的基本 CSS 样式时仍然遇到一些问题

首先，我的网站是我开发的用于 WordPress 的自定义主题（并不是说它应该有所作为）。

这是设置...

文件：styles.css

我在文件顶部导入我的其他 CSS 样式 - 这包括我的 mobile.css 文件，我在该文件中覆盖了基本样式。
然后定义了默认的 CSS 样式。

#main-nav .nav-wrapper{
margin: 0 auto;
padding: 0;
width: 594px;
}

#main-nav{
background-color: #F1F5C8;
padding: 10px 0;
}

#main-nav .border-image-left{
float: left;
width: 37px;
height: 43px;
background-image: url('images/navi_left_border.png');
}

#main-nav .border-image-right{
float: left;
width: 37px;
height: 43px;
background-image: url('images/navi_right_border.png');
}

#main-nav ul{
float: left;
margin: 0 auto;
padding: 0;
list-style: none;
width: 520px;
height: 43px;
line-height: 43px;
background-color: #DBEA99;
}

#main-nav ul li{
float: left;
display: block;
text-align: center;
padding: 0 20px;
width: 130px; /* fallback for non-calc() browsers */
width: calc( 100% / 4 );
}

#main-nav a, #main-nav a:visited{
display: block;
text-decoration: none;
color: #06421A;
}

#main-nav ul li a:hover{
opacity: 0.6;
}

文件：mobile.css

@media screen and ( min-width: 511px ) and ( max-width: 620px ){

/*****************/
/** Navigation **/
/***************/

#main-nav{
padding: 0;
}

#main-nav .nav-wrapper{
margin: 0 auto;
padding: 0;
width: inherit;
}

#main-nav ul{
width: 100%;
height: 53px;
line-height: 53px;
}

#main-nav .border-image-left, #main-nav .border-image-right{
width: 0;
height: 0;
background-image: none;
display: none;
}

#main-nav ul li{
padding: 0;
width: auto;
margin: 0;
}
}

因此，如果您能看到我做错的任何事情或任何让我尝试的建议，将不胜感激。整个星期都在处理这个问题！

P.s：我在 style.css 文件的开头导入了带有其他样式的 mobile.css 文件，其他覆盖似乎工作正常，但不是这一点。

如果您想查看实时版本以澄清代码，请告诉我...

Answer 1

问题出在您包含 CSS 个文件 mobile.css 的顺序上。这是命令。第一个文件是 style.css，然后是 mobiel.css included/imported 通过 style.css 如下。

@import "style/css/mobile.css";

CSS 不是移动优先。相反，使用 max-width 和 min-width 定位设备宽度。

由于 mobile.css 在其余 style.css 属性之前加载，因此无论宽度如何，其属性都被 style.css 覆盖（我相信这是由 media="screen"属性)

您可以让您的 CSS 移动设备优先，这意味着所有属性都针对移动设备进行了优化，然后随着屏幕变宽，您应用平板电脑，并针对元素优化 CSS 桌面设备。这很费力。最好的解决方案是在 style.css 之后加载 mobile.css，如下所示

<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style.css" type="text/css"> <!-- remove media attribute or set it to "all" -->
<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style/css/mobile.css" type="text/css">

重写 CSS 使用媒体查询斗争

Override CSS using Media queries struggle

html

css

overriding

media-queries

文件：styles.css