媒体查询被忽略

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改变字体大小值，它在整个页面的变化。 （桌面，平板电脑等）

我做错了什么？ :(

谢谢

干杯

PS：在CSS媒体查询是一个单独的文件，添加在html头，我有这样的行：

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

Answer 1

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

这将工作：EXAMPLE

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

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

这是行不通的：EXAMPLE

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

Answer 2

制作确定你的媒体查询是在'body'级别，否则你的视口的最小宽度将不被识别

Answer 3

你的查询说媒体类型是屏幕，最小宽度是320px 。对于桌面来说这是真的，所以CSS也适用于桌面。如果您需要专门用于平板电脑，那么您必须添加一些对于桌面为false的属性，但对于其他设备则为true。 max-width就是这样一个属性。

请看看这个link。