css3媒體查詢不工作 - 調整背景顏色變化

我似乎無法讓我的媒體查詢實際顯示..我試圖最終得到它，以便我的文本將根據瀏覽器大小重新調整大小，但我只是試圖做一個測試運行，看看它是否會工作。css3媒體查詢不工作 - 調整背景顏色變化

我試圖讓它在瀏覽器調整到1200px的寬度時頁面背景變成紅色。這裏是我的CSS：

@media screen and (min-width: 500px) and (max-width: 1200px) { 
    .main { 
    background-color: red; 
     } 
    }

，這裏是我的樣式錶鏈接：

<link rel="stylesheet" media="media screen and (min-width: 500px) and (max-width: 1200px)" href="tek_bigscreen.css">

我也有另一種樣式，在它沒有媒體查詢鏈接到頁面：

<link rel="stylesheet" type="text/css" href="tekstyle.css">

任何想法爲什麼媒體查詢不起作用？任何有關如何正確調整文本大小的見解將不勝感激。謝謝！

來源

2013-04-30 shanling

我不完全確定你的背景爲什麼不會變紅。但我發現正確調整文本大小的最佳方法是使用ems。

喜歡的東西：

body { 
    font-size:100%; 
} 
h1 { 
    font-size:2em; 
} 

@media only screen and (min-width:500px) and (max-width:1200px) { 
    body { 
     font-size:15px 
    } 
}

font-size:100%會讓1EM等於瀏覽器的默認字體大小，通常爲16像素，而當你減少對身體的標籤的字體大小，它被設置在EMS身體內的一切將按比例縮小規模。

編輯：此外，這只是一個建議，因爲這是我的方式，而不是將媒體查詢放入鏈接標記中。只需將所有媒體查詢保留在CSS文件中，並使用此poly-fill即可使其與舊IE一起使用。

來源

2013-04-30 05:02:37

謝謝你的回覆！我做了我的身體字體大小100％，並在頁面上的字體在EM，但調整瀏覽器窗口的大小不會改變字體大小:( – shanling 2013-04-30 05:20:27

ahhh它剛剛工作！我只需要添加另一個div類我正在包裝圍繞我的東西，非常感謝！:) – shanling 2013-04-30 05:25:33

好，我在看到你的評論後爲你製作了一個jsFiddle。如果你對這裏感興趣的話。 [jsFiddle]（http://jsfiddle.net/X3n3p/3/） – 2013-04-30 05:29:14

如果樣式表本身有@media，則無需在樣式錶鏈接中包含媒體屬性。的確，這可能會導致一個錯誤 - 我不確定。也許嘗試將代碼放入常規樣式表中，看看會發生什麼，或者將顏色聲明放在第一個樣式表中，而不使用@media包裝。

來源

2013-04-30 05:07:05

我試着把下面的代碼放在我的常規樣式表中，但它仍然不工作:( – shanling 2013-04-30 05:19:54

沒有看到你的HTML，我們只能猜測發生了什麼可能值得嘗試'背景：red'而不是'background-color'，但是測試用例可以很容易地顯示出你的代碼應該可以工作。<！DOCTYPE html> \t \t \t <元的charset = 「utf-8」> \t \t \t <風格媒體= 「所有」> \t。主要{寬度：500像素;高度：500像素;背景：藍色;} \t @media SCR een和（min-width：500px）和（max-width：1200px）{ \t。main { \t background：red; \t} \t} \t \t \t \t \t \t \t

\t \t

\t \t \t ' – 2013-04-30 05:32:35

css3媒體查詢不工作 - 調整背景顏色變化

回答

相關問題