我对响应式CSS设计是相当陌生的，但是我做不到一件非常简单的事情。我有一个大约1200像素宽的DIV。在iPad或智能手机上查看时，我希望该div缩小到最大屏幕尺寸。
例如，当您在智能手机上访问无响应的网站时，您会在电话屏幕上看到整个网站缩小到很小的尺寸。这实际上是无响应的，但是以某种方式我无法重现这种按比例缩小的效果：
我的div：
<div id="app">
<div id="screen">This is my screen</div>
</div>
我的CSS：
html,body {
margin:0px;
padding:0px;
}
#app {
width:1200px;
height:800px;
background-color:#CCCCCC;
overflow:auto;
}
#screen {
width:800px;
height:400px;
margin: 0 auto;
background-color:#ABABAB;
}
/* this is only for large screens: scale the background up to fill the entire screen */
@media only screen and (min-width : 1200px) {
#app {
width:100%;
height:100%;
background-color:#999999;
}
}
JSFiddle在这里。如何在小屏幕上按比例显示这些div？
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
这将为您提供所需的缩放比例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句