使用媒体查询覆盖CSS很困难

Question

我一直在寻找高和低网页低，特别是在Stack Overflow上，我仍然遇到一些问题，用@media queries覆盖我的基本CSS样式。

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

继承人的设置......

文件：styles.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，然后通过mobiel.css包含/导入style.css，如下所示。

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

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

由于在mobile.css属性的其余部分之前加载了style.css，所以style.css覆盖了其属性，无论宽度如何（我认为这是由media="screen"属性引起的）

你可以让你的CSS移动优先，这意味着所有属性都针对移动设备进行了优化，然后随着屏幕变宽，您可以应用平板电脑和桌面优化的CSS元素。这很费劲。最佳解决方案是在mobile.css之后加载style.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">