自动缩放网页以适应手机屏幕

Question

假设我已经为所有 smartphone 准备了一个移动版本，并且我为我的横幅选择了 320 像素 - 背景图片 (320x177)，代码如下所示：

@media only screen and (max-width: 400px) and (orientation : portrait) {
    body {margin: auto; max-width:320px}
    #banner {height: 177px; max-width: 100%; background-position: center top; background-repeat: no-repeat;  background-size: contain;}
    #banner {background-image: url("background320.jpg"); border:1px solid black;}
    #banner span {margin:15% 0 0 10%}   
    #content {max-width: 100%; height: 1000px; border:1px solid black;}
}

<div id="banner">
   <span>Banner Title</span>
</div>
<div id="content"> Some content </div>

在这种情况下，如果屏幕较大（比如我的 phone 360px 宽肖像），我会在左侧和右侧出现白色条纹。我不想为 360px 制作另一个移动版本，但我只想放大页面以适合屏幕（就像您用两根手指手动操作一样）。如果屏幕较小，则将按比例缩小以适应 window。怎么做？或者参考这个例子应该如何正确完成？

编辑： 我尝试使用 background-size: 100% 100% 在不同的屏幕分辨率下显示时保持背景纵横比，但高度总是有问题。如果我不设置静态高度height:177px那么背景高度只和里面的内容一样高或者如果里面没有内容则根本不出现。当必须在不同的屏幕分辨率上显示时，静态高度也很糟糕。你如何在不制作额外的移动版本的情况下解决这个问题？

Answer 1

使用 bootstrap 。不需要为不同的尺寸制作不同的布局，它是预制的 css 用于流体 layout.so 使用 classes of it.here is link for bootstrap http://getbootstrap.com/ 下载 bootstrap css link html 并使用 class "col-md-6" 因为 divs.they 对屏幕尺寸有反应。

Answer 2

使用 background-size:cover 或 background-size:100%，而不是 background-size:contain。

编辑： 听起来您希望 div 保持图像的纵横比。如果是这样，您可以在 div 上使用零高度和垂直填充：

#banner {
    background-image: url(http://placehold.it/320x177);
    background-size: 100% 100%;
    padding-top: 55.3125%;
}

<div id="banner"></div>

自动缩放网页以适应手机屏幕

auto scale webpage to fit mobile screen

css

media-queries

responsive-design