媒体查询被忽略

Question

我有一个小问题,我的css媒体查询被忽略,或主css是.

我正在尝试更改媒体查询中大小字体的值,桌面为75px,移动设备(max-width: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中的font-size值时,它会在整个页面中更改.(桌面,平板电脑等)

我做错了什么？:(

谢谢,

干杯

PS:CSS媒体查询是一个单独的文件,添加在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;
}