爲什麼我的320像素媒體查詢沒有被應用？

我有以下兩種媒體查詢：爲什麼我的320像素媒體查詢沒有被應用？

@media (min-width: 320px) and (max-width: 359px){ 
    .hero-unit h1 { 
     margin-bottom: 0; 
     font-size: 0.2em; 
     line-height: 0.5em; 
     letter-spacing: -5px; 
     color: inherit; 
    } 
    .hero-unit p { 
     font-size: 0.2em; 
     font-weight: 10; 
     line-height: 0.5em; 
     color: inherit; 
    } 
    .hero-unit { 
     background: url("../img/now320.jpg"); 
     height: 5em; 
     width: 15em;  
     padding: 0.5em; 
     margin-bottom: 2em; 
     background-color: #eeeeee; 
     -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
     border-radius: 4px; 
    } 
    h2 { 
     font-size: 2em; 
     font-weight: 20; 
     line-height: 0.5em; 
     color: inherit; 
    } 
} 

@media (min-width: 360px) and (max-width: 479px) { 
    .hero-unit h1 { 
     margin-bottom: 0; 
     font-size: 0.2em; 
     line-height: 1em; 
     letter-spacing: -5px; 
     color: inherit; 
    } 
    .hero-unit p { 
     font-size: 0.2em; 
     font-weight: 50; 
     line-height: 1em; 
     color: inherit; 
    } 
    .hero-unit { 
     background: url("../img/now360b.jpg"); 
     padding: 1em; 
     margin-bottom: 2em; 
     height: 10em; 
     width: 18em; 
     background-color: #eeeeee; 
     -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 
    } 
    h2 { 
     font-size: 2em; 
     font-weight: 20; 
     line-height: 1em; 
     color: inherit; 
    } 
}

我試圖找出爲什麼並不是在所有的應用到我的HTML頁面的寬度320規則，即使我用響應調整它Firefox中的設計工具寬度爲320px。

我使用Firebug檢查了CSS樣式，看看發生了什麼。我只看到正在應用的@media (min-width: 360px) and (max-width: 479px)部件。也就是說，它不是我認爲應該應用CSS規則的情況正在被覆蓋。發生的事情是這個規則永遠不會被應用。爲什麼？

來源

2012-10-02 dot

你能發佈完整的頁面代碼/鏈接嗎？ – Giona

有時瀏覽器只是不允許視口小於一定大小，我認爲該線大約在360左右，因此即使使用您提到的工具，它也可能不會被註冊。我不能說，因爲我需要看現場的例子。

您是否在實際移動設備上或至少一個模擬器上檢查過該網站？ Opera Mobile Emulator非常易於使用。

順便說一句，如果你想工作移動第一 - 有先寫你的320個設備CSS，與沒有媒體查詢，作爲「基線」經驗的想法。這是您指定字體系列，顏色，通常應用的樣式的地方。然後您可以在媒體查詢中添加更大和更大的尺寸，這是您指定佈局和文本大小更改的位置。重點是 - 不要將320-359款式包裝在媒體查詢中，因爲這將是每個人的基本體驗。

來源

2012-10-02 16:46:16 chipcullen

感謝您的建議。 – dot

這個Opera Mobile Emulator有多準確？我已經下載並正在嘗試它。一些設備尺寸是關閉的。就像華碩的EEE系列一樣...... – dot

我不確定你用哪種方式測量精確度 - 但我並不知道。（說實話，我主要在XCode中使用iOS模擬器，這只是一個難題。）如果您指的是屏幕的大小，請記住，您的臺式機顯示器的像素密度比這些小得多設備。這是一個很好的運行如何使用模擬器：http://mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator/一個整潔的事情要注意的是，它可以掛鉤與Opera的蜻蜓調試器（又名Firebug for Opera） – chipcullen

如果要應用於所有頁面的320px的規則，你需要把它寫這樣

@media (min-width: 320px)

沒有任何與（最小寬度....）後

來源

2012-10-02 16:08:40 Caelea

爲什麼我的320像素媒體查詢沒有被應用？

回答

相關問題