Question

完成对@media屏幕的响应和（max-width：320px）{code}和@media屏幕以及（最大宽度：480px）{code}的iphone人像和风景，该设计在pc中完美运行浏览器，但设计看起来很小，适用于320px，它在iPhone屏幕的左侧屏幕显示160.

Answer 1

在标题中添加以下元标记

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

还有更多的事情 Internet Explorer 8或更早版本不支持媒体查询。您可以使用media-queries.js或respond.js在IE中添加媒体查询支持。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Answer 2

@ user2582867：请使用以下代码：

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

#container { width: 310px!important; }
#menu { float: none!important; padding-left: 10px!important; padding-right: 10px!important; text-align: center!important; width: 290px!important; }
#menu { float: none!important; padding-left: 10px!important; padding-right: 10px!important; text-align: center!important; width: 290px!important; } 
.columns { background: none repeat scroll 0 0 transparent!important; padding-left: 5px!important; padding-right: 5px!important; } 
.columns > .content { float: left!important; margin-left: 15px!important; width: 280px!important; }
}

响应问题：响应在iphone中无法正常工作

2 个答案: