CSS媒體查詢不加載

我正在編寫一個靜態網站並在本地進行測試。我已經寫了一個媒體查詢來改變佈局，以便在智能手機上查看更好。通過媒體查詢，我的目標是將文本和個人資料照片從並排變爲另一個。CSS媒體查詢不加載

我的問題是，當我在Chrome或Firefox上加載HTML文件並調整窗口大小時，佈局不會改變，我不知道如何修復它。任何幫助將非常感激。在下面找到我的代碼。

對於我的標準的CSS我有這個（小片段）：

#about-text { 
    /*A div containing paragraphs and a table*/ 
    display: inline-block; 
    width: 50%; 
} 

#profile-photo { 
    /*An img tag after the closing about-text div*/ 
    border: 4px solid #1abc9c; 
    display: inline; 
    float: right; 
    margin: 8% 0% 0% 0%; 
    max-width: 40%; 
}

然後，我有一個媒體查詢和相應的CSS：

@media (min-device-width : 320px) and (max-device-width : 480px) { 

#about-text { 
    /*A div containing paragraphs and a table*/ 
    display: block; 
    width: 50%; 
} 

#profile-photo { 
    /*An img tag after the closing about-text div*/ 
    border: 4px solid #1abc9c; 
    display: block; 
    float: right; 
    margin: 8% 0% 0% 0%; 
    max-width: 40%; 
} 
}

來源

2014-07-27 Finn LeSueur

您正在使用最小設備寬度和最大設備寬度，該設備寬度僅記錄設備的屏幕大小。使用最小寬度和最大寬度，當您調整大小時，它可以在瀏覽器中運行。

例子：

.testDiv { 
    color: green; 
} 

@media (min-width : 320px) and (max-width : 480px) { 
    .testDiv { 
     color: red; 
    } 
}

http://jsfiddle.net/ZUPD2/

來源

2014-07-27 11:16:43

謝謝！這很好。在使用最大/最小設備寬度和最大/最小寬度之間，哪些功能發生了變化？這不會再做什麼特別的事情嗎？它的工作原理是什麼？ –

不同的網絡瀏覽器變幻莫測，有些只支持其中一種查詢。我無法真正想到爲什麼您需要使用設備寬度而不是寬度的很多原因，除非您想要在縮放或調整窗口大小時更改樣式。本文建議使用兩者來覆蓋您的基礎，我同意。 http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/ –

也許是因爲沒有右括號爲媒體查詢塊？

來源

2014-07-27 11:12:38 minychillo

道歉 - 我不小心留下的是支架提離，當我從我的編輯對面複製。謝謝你。 –

CSS媒體查詢不加載

回答

相關問題