如何在1920px和1366px（笔记本电脑）屏幕尺寸上兼容网页？

Question

我正在开发一个网站，其中的要求是1920 * 1080px。共有五个部分，每个部分都是相同的规格（宽1920，高1080）。我没有使用引导容器，因为它的宽度是960像素，也使用容器流体，我无法获得预期的输出。所以我在scss中设置每个div的宽度和高度，并且页面在1920px的屏幕尺寸上看起来不错。但是当我在笔记本电脑上打开它时，它会变得非常糟糕。我也在使用多个图像，覆盖位置和z-index属性。 的HTML结构如下：

<div id="page_index"> 
<div class="wrapper"> 
    <div id="one"> 
    <div class="row"> 
     <div class="col-xs-12 text-center"> 
     <!-- Here are the contents --> 
     </div> 
    </div> 
    </div> 
    <!-- div id=two, three, four, five goes here --> 
</div> 
</div> 

这里是哪里设置高度和宽度的一个div的例子：

#one { 
    background-color: $g_color_blue_promotion; 
    width: 1920px; 
    min-width: 100%; 
    margin: 0 auto; 
    height: 1080px; 
    font-family: 'Open Sans', sans-serif; 
    position: relative; 
} 

在这种情况下，应该是最好的，使之适合对于两种屏幕尺寸？请注意，此页面不需要有响应，但至少应该能够在两种屏幕尺寸上查看它。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1"> 

在你的JS文件头中使用这个。