媒體查詢根本不工作

我處於絕望之中。我正在嘗試創建一個網站，並使其適合移動設備和響應式，但是，我似乎無法獲得任何媒體查詢的功能！我所有的尺寸，寬度和高度都在「％/ em」中，我的字體大小是「vw/em」。我得到的最大問題是，隨着屏幕縮小，我的文本也縮小了，直到它變得眼花繚亂才能閱讀！我不認爲相關的發送任何代碼，但如果需要的話，我會發送一些我的代碼（我的網站仍然是離線的，如果這個問題沒有解決，我不能把它放在那裏）。媒體查詢根本不工作

這是我曾嘗試：

我試圖把這個在我的標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

沒有，當我嘗試在標籤或在一個單獨的CSS樣式表媒體查詢成功。

我試過去除它。

我嘗試了這些媒體查詢我的字體大小：

@media (max-width: 400px) { 
    body { font-size: 60%;} 
} 

@media only screen and (max-device-width: 800px) { 
    body { 
     font-size: 80%; 
     background-color: blue; 
    } 

} 

@media (max-width: 1100px) { 
    body { font-size: 120%;} 
}

我也嘗試過其他媒體的質疑，但絕對什麼都沒有改變！難道我做錯了什麼？可能但是什麼？！這導致了很多問題！我不能改變我的標題根據不同的屏幕尺寸，我不能改變我的顯示，我的標題鏈接是一團糟等

另外，請注意，我是一個初學者，我不使用任何JavaScript，引導或任何。

非常感謝您的幫助！

來源

2015-05-12 00 00

你的查詢是有點怪異。也許有一些合乎邏輯的限制，你可以達到你要找的東西？這就是我的意思是：

@media (max-width: 400px) { 
    body{ 
     background-color: yellow; 
    } 
} 

@media (min-width: 401px) and (max-width: 800px){ 
    body { 
     background-color: blue; 
    } 
} 

@media (min-width: 801px) and (max-width: 1100px) { 
    body { 
     background-color: purple; 
    } 
} 

@media (min-width: 1101px){ 
    body{ 
     background-color: orange; 
    } 
}

在我的愚見，設定同時使用min-width和max-width幫我想像這是怎麼回事更好的時間間隔。這pen顯示顏色隨着您改變寬度而改變。它沒有太大的好處，但是這是媒體查詢的開始。

編輯：

筆包含因爲酷

來源

2015-05-12 04:51:26

這很奇怪，我以前也嘗試過你提出的方法，但它沒有回到那時......現在它確實如此。這可能是因爲我在媒體查詢中添加了「屏幕」...？無論如何，謝謝你，現在它創造奇蹟！我仍然有很多問題需要解決，但我想我會問另一個問題= D！謝謝！ –

也許你有一些語法問題，誰知道......添加屏幕應該不會改變任何事情，一切都停止工作。 –

想到這一點，它只是沒有意義。我發現，當我嘗試將我的媒體查詢腳本放在我的頭標記中而不是我的CSS樣式表中時，它的工作原理...我認爲這可能是我的錯誤。 –

通常，最好使用基於最小屏幕寬度的媒體查詢。這裏是你發佈的代碼的工作示例：

Codepen：http://codepen.io/anon/pen/eNJXXp

@media (max-width: 400px) { 
    p { font-size: 60%;} 
} 

@media (min-width: 400px) { 
    p { 
     font-size: 80%; 
     background-color: blue; 
    } 

} 

@media (min-width: 800px) { 
    p { font-size: 120%;} 
}

來源

2015-05-12 03:26:52 ollierexx

顏色之間的過渡哦，我剛纔明白你的「最小寬度」是什麼意思！我曾嘗試過，但我認爲我的語法錯誤。謝謝！另一個答案更精確一些，因爲我喜歡有一個實際的代碼示例，但是感謝您的幫助。 =） –

媒體查詢根本不工作

回答

相關問題