如何在1920px和1366px（筆記本電腦）屏幕尺寸上兼容網頁？

我正在開發一個網站，其中的要求是1920 * 1080px。共有五個部分，每個部分都是相同的規格（寬1920，高1080）。我沒有使用引導容器，因爲它的寬度是960像素，也使用容器流體，我無法獲得預期的輸出。所以我在scss中設置每個div的寬度和高度，並且頁面在1920px的屏幕尺寸上看起來不錯。但是當我在筆記本電腦上打開它時，它會變得非常糟糕。我也在使用多個圖像，覆蓋位置和z-index屬性。的HTML結構如下：如何在1920px和1366px（筆記本電腦）屏幕尺寸上兼容網頁？

<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; 
}

在這種情況下，應該是最好的，使之適合對於兩種屏幕尺寸？請注意，此頁面不需要有響應，但至少應該能夠在兩種屏幕尺寸上查看它。

來源

2017-08-07 Riz

使用[** Media Queries **]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries） – Swellar

重新考慮您的方法。有很多東西可以在CSS中使用，例如'vw'和'vh'以及flexbox。另外，您使用Bootstrap的事實應該會更容易。 –

-2

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

在你的JS文件頭中使用這個。

來源

2017-08-07 02:14:11

使用這個但不在你的JS文件上。在您的HTML文件的標題中使用。 – pacanga

如何在1920px和1366px（筆記本電腦）屏幕尺寸上兼容網頁？

回答

相關問題