@media僅限屏幕和（最大寬度：479px）不適用於手機

我已添加以下用於響應的代碼。但是對於移動版本，其顯示背景顏色＃000。它不顯示背景顏色爲＃111.Please幫助@media僅限屏幕和（最大寬度：479px）不適用於手機

@media only screen and (max-width: 1024px) { 
body{ 
    background-color:#ff0000; 
    } 
} 

@media only screen and (max-width: 767px) 
{ 
body{ 
    background-color:#000; 
    } 
} 

@media only screen and (max-width: 479px) 
{ 
body{ 
    background-color:#111; 
    } 
}

來源

2013-04-02 Shilp

你有指定的視口元標記？我建議將479改爲480。 –

是的，我錯過了指定視口元標記。添加它，它工作正常。 – Shilp

酷，我會補充說，作爲一個答案，如果你能接受它，當你能夠這將是偉大的。 –

在文檔的頭部，請確保您有

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

如果忽略這一點，那麼許多設備將縮放以適應視口的頁面。

祝你好運

來源

2013-04-02 15:40:56

它的工作原理！謝謝大衛。 – Shilp

太好了，我很高興你已經解決了 –

像我這樣的人基本都會忘記，謝謝！ – Pavitar

也許你可以通過使用

@media only screen and (min-width:768px) and (max-width: 1024px) {}

specifiy因爲如果屏幕的寬度爲200像素，將遵守所有它的其他規則不超過其寬度

有一個偉大的日子

來源

2013-04-02 14:00:37

嘗試使用設備的寬度，而不僅僅是屏幕尺寸。許多手機/平板電腦設備將在總覽中打開頁面，因此屏幕尺寸將被忽略。

另外一些移動設備會響應@media handheld選擇器。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
/*Ipad*/ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
/* Smartphones (portrait and landscape)*/ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 
@media only screen and (min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 

@media handheld and (max-width: 960px) 
/*handheld*/

來源

2013-04-02 14:18:49 apaul

-1

爲什麼不使用Twitter Bootstrap？ http://twitter.github.com/bootstrap/

來源

2013-04-02 14:22:07

我和你在一起。 Bootstrap或Foundation等其他一些優秀的框架可以節省大量時間，並且仍然足夠靈活，以便您可以自定義設計。 –

你有指定的視口元標記嗎？我建議將479改爲480。

下面是一個視口元標記的例子 - 這是我在我自己的響應網站上使用的一個。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

來源

2013-04-03 09:09:55

+1表示可選寬度。 –

入住標籤

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

來源

2018-01-17 07:42:50

@media僅限屏幕和（最大寬度：479px）不適用於手機

回答

相關問題