如何使用Bootstrap在Web中自动扩展元素？

Question

我有一台笔记本电脑和一台使用1920 X 1080分辨率的显示器，但它们的屏幕尺寸不同。 （笔记本：13英寸，PC显示器：19英寸）

我在笔记本电脑屏幕上工作，我定义了元素＆＃39; Height＆＃39;在＆＃39;值X＆＃39; px固定（示例值...）。然后当我将我的互联网浏览器（Chrome，IE等）移动到电脑屏幕时，它显示了很多空白空间，如下所示。

我该如何解决这个问题？

有人建议我使用媒体查询......可以吗？

Answer 1

我在下面做了一个例子。保持宽度和高度的百分比将在你打开的任何设备上自动调整。

＆＃13;

＆＃13;

*{box-sizing:border-box}
body,html{ width:100%; height:100%}
.bluebg{ width:100%; height:100%; background:blue; padding:20px;}
.yellowbg{ width:100%; height:100%; background:yellow; }

＆＃13;

<div class="bluebg">
  <div class="yellowbg">
    &nbsp;
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;