媒體查詢被忽略

我有一個小問題，我的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">.

來源

2013-04-20 mstroiu

確保您的媒體查詢被放置在原來的聲明之後：

這將工作：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; 
}

來源

2013-04-20 18:47:07 Yenn

最後，它使用twitter引導媒體查詢片段。謝謝 – mstroiu 2013-04-24 10:10:54

製作確定你的媒體查詢是在'body'級別，否則你的視口的最小寬度將不被識別

來源

2013-04-20 14:14:03 RhinoWalrus

你的查詢說媒體類型是屏幕，最小寬度是320px 。對於桌面來說這是真的，所以CSS也適用於桌面。如果您需要專門用於平板電腦，那麼您必須添加一些對於桌面爲false的屬性，但對於其他設備則爲true。 max-width就是這樣一個屬性。

請看看這個link。

來源

2013-04-20 14:19:24

這一點我知道，但是當我使用最大寬度根本不工作。 – mstroiu 2013-05-27 11:23:16

媒體查詢被忽略

回答

相關問題