教你如何用 lib-flexible 實現移動端H5頁面適配

時間 2019-11-13

標籤如何 lib flexible 實現移動 h5 頁面適配欄目 Flex 简体版

原文原文鏈接

前話

很久沒寫教程了（可能會誤導新手的菜鳥教程(￣▽￣)"）。css

這是個人github，歡迎前端大大們和我一塊兒學習交流
https://github.com/pwconghtml

最近入職公司作前端實習，這幾個星期來學到了移動端H5頁面適配。（之前根本沒作過移動端網頁/(ㄒoㄒ)/~~，仍是微信端的）前端

因此把我學到的一個小知識點寫下來，也分享給前端新手們。git

正文

0x00 大概說明

作移動端網頁和pc端很大不一樣的即是如今移動端窗口分辨率繁多。github

不少時候UI給的設計圖只有一份，仍是按照iphone6設計的，這就讓前端適配其餘例如6plus或安卓等其餘移動端頭疼。微信

還好，阿里巴巴2015年末公開了其成熟的適配方案，lib-flexible，至於其可靠性可參考每一年天貓活動的移動端頁面。iphone

這個方案的用法大概是這樣的，HTML 頭部引入 lib-flexible 的樣式和js庫，容器或組件寬高主要使用單位 rem ，字體大小則不變仍然使用單位 px。學習

還有一個約束是，由於只面向移動端，所以咱們限制最外層包裹的div最大寬度爲 640px字體

我這裏只簡單介紹怎麼使用 lib-flexible 實現移動端適配，若是須要深刻解釋的知識，請閱讀以下文章：
https://github.com/amfe/article/issues/17flex

0x01 引入 lib-flexible

最新的庫文件能夠到這裏下載：
https://github.com/amfe/lib-flexible

clone 下來後在 build 目錄下找到 flexible.css 和 flexible.js 在HTML頭部引入便可，例如：

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

    <head>
        <title>lib-flexible demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

        ...

        <link href="css/flexible.css" rel="stylesheet">
        <script src="js/flexible.js"></script>

    </head>

    <body>

        ...

    </body>

</html>

0x02 計算`rem`值

谷歌 rem 的用法後不少人應該大概瞭解 rem 的原理了，大概就是 rem 依賴 font-size 的值，例如默認下 1rem = 16px，所以經過在不一樣分辨率修改 font-size 就能夠達到適配不一樣分辨率的移動端了。

須要詳細瞭解 rem 值計算可參考這篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html

rem 來作寬高定型有個最大的問題是，font-size 如何計算的問題，如何算得的 font-size 能夠在不一樣分辨率下顯示效果一致呢？

不用擔憂，lib-flexible 已經幫你算好了，在你調整窗口大小的時候自動計算調整 rem 的基準，你只要作的是，按照設計圖算出能適配不一樣分辨率的移動端的 rem 值。

這裏有個關係圖：

看不懂不要緊，看那麼多flexible的教程都放了我也就跟着放出來好了。

假如UI給了這個設計圖（找不到工做的UI (/▽＼)）：

好，我這辣雞一眼看出了：

這是以iphone5爲標準的ui設計稿，設備窗口寬度爲 640px
中間一個色塊，居中，背景色爲 #0075a9，margin-top 爲 100px， width 爲 240px，height 爲 120px

接下來，咱們來計算rem值，計算公式很簡單：

需轉換的px值 / 設計稿寬度px值 * 10

上面的尺寸計算一下轉換成下面的說法：

這是以iphone5爲標準的ui設計稿，設備窗口寬度爲 10rem
中間一個色塊，居中，背景色爲 #0075a9，margin-top 爲 1.5625rem， width 爲 3.75rem，height 爲 1.875rem

0x03 按照找不到工做的UI給的設計稿敲出代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/flexible.css" rel="stylesheet">
    <script src="js/flexible.js"></script>

    <style>
        html, body{
            width: 100%;
            height: 100%;
            position: relative;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        body{
            background: #333;
        }

        .container{
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            height: 100%;
            max-width: 640px;
            background-color: white;
            margin: 0 auto;
        }

        .block{
            
            margin: 0 auto;
            margin-top: 1.5625rem;

            width: 3.75rem;
            height: 1.875rem;

            background-color: #0075a9;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="block"></div>

    </div>

</body>

</html>