html - 根据浏览器大小缩放 HTML 页面

Question

我正在尝试构建一个页面，该页面必须适用于浏览器的任何大小并适当缩小。我目前正在使用 Bootstrap 框架，但如果有更好的东西，我不会依赖它。

想法是这是一项客户满意度调查，将在平板电脑上填写，不能滚动等。

目前我的 HTML 如下:

<div class="row">
    <div class="col-lg-12">
        <h1>How are we doing?</h1>
    </div>
</div>
<div class="col-lg-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">How was the cleanliness today?</h3>
        </div>
        <div class="panel-body">
            <center>
                <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div>
            </center>
        </div>
    </div>
</div>

这是可行的，但当然不会考虑页面高度等因素，因此它会滚动。 img-responsive 类会根据宽度适当调整图像的大小，但如果它可以考虑高度，那就太好了。

我尝试了一系列的方法，例如将 body 高度设置为 height:100vh; 但我无法让它缩小以适合页面。目前它看起来像:

我希望它看起来像(显然不是这种扭曲的、糟糕的 mspaint 工作):

Answer 1

你的 <div class="panel-body">包含 1 个 child ，它是 center还有你的另一个<div class="panel-body"> child 变得喜欢烂脸改掉center标签

<div class="row">
    <div class="col-lg-12">
        <h1>How are we doing?</h1>
    </div>
</div>
<div class="col-lg-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">How was the cleanliness today?</h3>
        </div>
        <div class="panel-body">

                <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div>

        </div>
    </div>
</div>  

你应该从 Bootstrap#Panels
如果您选择在其中添加标签，请做好准备，它的行为会有所不同

编辑: 还要看看你的网格布局是什么，它可能以 .container(固定宽度)或 .container-fluid(全宽)开始 Bootstrap#Grid