那些H5用到的技術（6）——屏幕適配

時間 2019-12-13

標籤那些 h5 用到技術屏幕適配简体版

原文原文鏈接

前言

曾經屏幕適配一直是個頭疼的問題，各類坑，各類瀏覽器&設備兼容問題，好在的是，隨着技術&標準的不斷髮展，這個問題獲得了極大程度的解決，這篇文章主要對以前開發過程當中的屏幕適配問題作個的簡單總結，包括兩個部分。css

長屏適配

得益於CSS樣式中vh&vw單位的支持普及，終於能夠放心大膽的使用了，避免使用相對繁瑣的scale、em、rem。
如圖所示：
html

vh：將window.innerHeight分紅100份，即1vh等於window.innerHeight的1%
vw：將window.innerWidth分紅100份，即1vw等於window.innerWidth的1%jquery

注意：長度包括滾動條
注意：長度包括滾動條
注意：長度包括滾動條git

而後，咱們就能夠放心的使用vw當作長度單位來進行排版啦，由於在長屏的狀況下，高度咱們不在乎（由於高度隨頁面內容變化），而元素會隨着寬度的變化而變化。
以750x1334的設計稿爲例，750/100=7.5px，那麼1vw=7.5px，在排版的時候，根據這個單位換算便可。github

簡單示例以下：傳送門
瀏覽器

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <style>
    html,
    body {
        height: 100%;
        background-color: lightgray;
    }

    .container {
        width: 100vw margin: 0 auto;
        overflow: auto;
    }

    .banner {
        background-color: black;
        height: 50vw;
        margin: 2vw;
        border-radius: 2vw;
    }

    .row {
        display: flex;
    }

    .item {
      flex: 1;
        height: 46vw;
        background-color: cornflowerblue;
        margin: 2vw;
        font-size: 4vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="banner">
        </div>
        <div class="row">
            <div class="item">
                列表項
            </div>
            <div class="item">
                列表項
            </div>          
        </div>
        <div class="row">
            <div class="item">
                列表項
            </div>
            <div class="item">
                列表項
            </div>          
        </div>
        <div class="row">
            <div class="item">
                列表項
            </div>
            <div class="item">
                列表項
            </div>          
        </div>
        <div class="row">
            <div class="item">
                列表項
            </div>
            <div class="item">
                列表項
            </div>          
        </div>
    </div>
</body>

</html>

那麼有同窗可能有疑問了，vw和%百分比有啥區別？在我看來，主要有2個。
一、百分比是定義基於包含塊（父元素）寬度的百分比寬度，受到position屬性的影響。而vw永遠以瀏覽器可視區爲基準。
二、百分比只能用於width和height，而vw能夠用於任何以大小爲單位的屬性，例如font-size，這樣就很是方便了。微信

單頁適配

與長屏不一樣的是，相似單頁H5小遊戲，H5單頁滾屏展現等，咱們須要在屏幕內將頁面完整的展示出來，這就無法使用vw了，由於咱們須要根據設計圖比例，保證單頁完整動態計算和限制頁面的展現大小展現，而vw沒法作單一限制，這時js+百分比就派上用場了。app

以微信中的單頁活動展現爲例，去掉64px的頂部導航，設計圖定爲750*1206。
有2種狀況：
一、當屏幕寬度大於設計稿時
爲了保證單頁完整顯示，須要以高度爲基準，動態計算出寬度，居中顯示
字體

二、當屏幕寬度小於設計稿時
爲了保證單頁完整顯示，須要以寬度爲基準，動態計算出高度，居中顯示
flex

字體大小，也可根據縮放比例，動態計算px

示例代碼以下：傳送門

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        background-color: lightgray;
    }

    .wrapper {
        background: url('./img/timg.jpg') no-repeat center;
        background-size: cover;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .container {
        position: relative;
        height: 100%;
    }

    .banner {
        height: 30%;
        background-color: bisque;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2%;
    }

    .row {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2%;
        height: 32.5%;
    }

    .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: pink;
        height: 100%;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="banner">
                banner
            </div>
            <div class="row">
                <div class="item" style="margin-right: 1%">
                    列表項
                </div>
                <div class="item" style="margin-left: 1%">
                    列表項
                </div>
            </div>
            <div class="row">
                <div class="item">
                    列表項
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    var fontSize = $('html').css('font-size').slice(0, -2);

    function measureArea() {
        var height = $(window).height();
        var width = $(window).width();

        var temp_width = height * 10 / 16;
        if (temp_width < width) {
            $('.container').css('width', temp_width + 'px');
            $('.wrapper').css('max-width', temp_width + 'px');
        } else {
            $('.container').css('width', width + 'px');
            $('.container').css('height', width * 16 / 10 + 'px');
            $('html').css('font-size', fontSize * (width / temp_width) + 'px');
        }
    }
    window.onresize = measureArea;
    measureArea();
    </script>
</body>

</html>