Question

让我们说我为所有智能手机准备了一个移动版本，我为我的横幅选择了320px - 背景图片（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>

在这种情况下，如果屏幕较大（就像我的手机360px宽肖像），我的左右两侧会出现白色条纹。我不想为360px制作另一个移动版本，但我只想扩大页面以适应屏幕（与用两根手指手动相同）。如果屏幕较小，则缩小以适合窗口。怎么做？或者如何正确地参考这个例子呢？

编辑：我尝试使用background-size: 100% 100%在不同的屏幕分辨率下显示时保持背景宽高比，但高度始终存在问题。如果我没有设置静态高度height:177px，则背景高度仅与内部内容一样高，或者如果内部没有内容则根本不显示。必须在不同的屏幕分辨率下显示时，静态高度也很差。如何在不增加移动版本的情况下解决这个问题？

Answer 1

使用bootstrap。不需要为不同的大小制作不同的布局，它是流体布局的预制css。所以使用它的类。这是bootstrap http://getbootstrap.com/的链接下载bootstrap css链接html并为div使用“col-md-6”类。它们会对屏幕尺寸做出响应。

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>

自动缩放网页以适应移动设备屏幕

2 个答案: