css - 媒体查询被忽略

Question

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

我正在尝试更改媒体查询中字体大小的值，台式机为 75 像素，手机为40 像素(max-width:320px;)左右。但它不起作用。

我的 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 Media Queries 是一个单独的文件，添加在 html 头中，我有这一行：

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

Answer 1

确保您的媒体查询放置在原始声明之后：

这将起作用： 示例

.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;
}

Answer 2

您的查询说媒体类型是屏幕，最小宽度是 320 像素。这适用于桌面，因此 css 也适用于桌面。如果您专门为平板电脑需要它，那么您将必须添加一些属性，该属性对于桌面为 false，但对于其他设备为 true。max-width就是这样一种财产。

看看这个链接。

Answer 3

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