@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）不适用于手机

回答

相关问题