html - 使用媒体查询斗争覆盖 CSS

Question

我一直在网络上进行高低搜索，尤其是在 Stack Overflow 上，但我在使用 @media 查询 覆盖我的基本 CSS 样式时仍然遇到一些问题。

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

这是设置...

文件:样式.css

1. 我在文件顶部导入我的其他 CSS 样式 - 这包括我的 mobile.css 文件，我在该文件中覆盖了基本样式。
2. 然后定义默认的 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，然后是通过 style.css 包含/导入的 mobiel.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">