Html 使用媒体查询覆盖CSS

我一直在网上上下搜索，特别是在堆栈溢出方面，我仍然在使用

@media querys

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

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

这是设置

文件：styles.css

我在文件顶部导入我的其他CSS样式-这包括我的

mobile.CSS

文件，在那里我覆盖了基本样式

然后定义默认的CSS样式

---

文件：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;
}
}

因此，如果您能看到我做的任何不正确的事情或任何建议，我将不胜感激。整个星期都在讨论这个问题

注意：我在style.css文件的开头导入了mobile.css文件和其他样式，其他覆盖看起来很好，但不是这一点

---

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

问题在于包含CSS文件的顺序

mobile.CSS

。这是订单。第一个文件是

style.css

，然后通过

style.css

包含/导入

mobiel.css

，如下所示

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

CSS首先不是移动的。相反，使用

最大宽度

和

最小宽度

来确定设备宽度

由于

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"> 

最后是否包含

mobile.css

last？请提供JSFIDLE（它使问题更容易解决）。您是在手机上测试还是只是重新调整视口窗口的大小？如果第一种情况是真的，那么考虑检查<代码>视口< /代码>元标签，否则，请考虑@ TayaLee的问题。@ TayaLee是的，这是我的最后一个导入，但是我将它们全部导入到文件的顶部。我应该提到的另一件事是，我能够覆盖这个mobile.CSS中的其他CSS样式，但这个导航部分似乎没有。@AdamAzad我正在测试这两种样式

<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">