Css 忽略媒体查询

我有一个小问题，我的css媒体查询被忽略，或者主css被忽略

我正在尝试更改媒体查询中大小字体的值，对于台式机是75px，对于移动设备

（最大宽度：320px；）

是40px左右。但它不起作用

我的css媒体查询代码是：

/* Smartphones (portrait) ----------- */

@media only screen and (min-width : 320px) {
  h1.site-title {
    color: #fff;
    font-family: 'Open Sans', sans-serif; 
    font-size: 40px; 
    font-weight: 800; 
    line-height: 1em;
  }
}

当我在媒体查询css中更改字体大小值时，整个页面都会更改。（台式机、平板电脑等）

我做错了什么(

谢谢,

干杯

PS:CSS媒体查询是一个单独的文件，添加在html标题中，我有以下行：

<meta name="viewport" content="width=device-width">.

。

确保您的媒体查询处于“主体”级别。否则将无法识别视口的最小宽度。

您的查询表示媒体类型为屏幕，最小宽度为320px。这对于桌面是正确的，因此css也适用于桌面。如果您专门为平板电脑需要它，则必须添加一些属性t对于桌面为false，但对于其他设备为true。

max width

就是这样一个属性

---

请务必查看此项。

确保您的媒体查询位于原始声明之后：

这将有助于：

这行不通：

---

最后，它使用了twitter引导媒体查询片段。谢谢你，我知道的很多，但是当我使用max width时，它根本不起作用。

.test{
    width:500px;
    height:50px;
    background:red;
}

@media (max-width:500px){
.test{
    width:200px;
}
}

@media (max-width:500px){
.test{
    width:200px;
}
}
.test{
    width:500px;
    height:50px;
    background:red;
}