PC端適應屏幕分辨率

時間 2020-05-05

標籤適應屏幕分辨率简体版

原文原文鏈接

如何讓HTML頁面適應不一樣的屏幕分辨率

1.根據不一樣的分辨率，加載不一樣的css樣式文件(通常不用)

①針對800、1280、1440、1600、1920等分辨率，建立不一樣的css文件。而後在各類分辨率css文件下，寫css樣式表。css

針對一個頁面，寫多css樣式表，按照不一樣的要求，有些要求適配1280~1920分辨率，各個分辨率之間，只對頁面上的元素進行寬高、尺寸、位置等進行調整，總體的框架是類似或者說是相同的。html

一般是先完成一個分辨率下的css樣式表。而後在這個基礎之上，對其餘分辨率進行調整。css3

②加載方式。瀏覽器

在HTML頁面的<head></head>標籤中，插入<script>代碼，在不一樣的分辨率下，加載不一樣的css樣式表。框架

注意這裏的js必定要寫在<head></head>標籤裏面，這樣在加載頁面內容以前，能夠提早把css樣式表加載出來學習

<script>
    // 分辨率大於等於1680，大部分爲1920的狀況下，調用此css
    if(window.screen.width >= 1680){
        document.write('<link rel="stylesheet" href="css/index_1920.css">');
    }
    // 分辨率在1600-1680的狀況下，調用此css
    else if(window.screen.width >= 1600){
        document.write('<link rel="stylesheet" href="css/index_1600.css">');
    }
    // 分辨率小於1600的狀況下，調用此css
    else{
        document.write('<link rel="stylesheet" href="css/index.css">');
    }
</script>

2.媒體查詢

媒體查詢是CSS3的新特性，絕大多數瀏覽器均可兼容這一特性。媒體查詢的思路也是根據不一樣的分辨率，應用不一樣的css樣式。（原理同樣）spa

學習媒體查詢學習地址菜鳥教程-CSS3 @media 查詢
ssr

兩種使用媒體查詢的方式:code

1.根據不一樣的分辨率，引入不一樣的css樣式表(同方法一)htm

<!-- 分辨率低於1280，採用test-01.css樣式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">
<!-- 分辨率高於1400，採用test-02.css樣式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

2.在同一個css樣式表中，根據不一樣的分辨率，寫不一樣的css樣式(同方法二)

<style media="screen">
    /*分辨率低於1280，採用下面的樣式*/
    @media screen and (max-device-width:1280px){
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    }

    /*分辨率高於1440，採用下面的樣式*/
    @media screen and (min-device-width: 1440px){
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    }
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。