移動端H5頁面的最佳終端適配之Flexible

時間 2019-11-09

標籤移動 h5 頁面最佳終端適配 flexible 欄目無線简体版

原文原文鏈接

lib-flexible是什麼？

lib-flexible是一個製做H5適配的開源庫，能夠點擊這裏下載相關文件，獲取須要的JavaScript和CSS文件。css

固然你能夠直接使用阿里CDN：html

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

將代碼中的{{version}}換成對應的版本號0.3.4。git

flexible的實質

flexible實際上就是能過JS來動態改寫meta標籤，代碼相似這樣：github

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

事實上他作了這幾樣事情：web

動態改寫<meta>標籤
給<html>元素添加data-dpr屬性，而且動態改寫data-dpr的值
給<html>元素添加font-size屬性，而且動態改寫font-size的值

使用方法

lib-flexible庫的使用方法很是的簡單，只須要在Web頁面的<head></head>中添加對應的flexible_css.js,flexible.js文件：app

第一種方法是將文件下載到你的項目中，而後經過相對路徑添加:字體

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加載阿里CDN的文件：flex

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

例如：ui

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <link rel="apple-touch-icon" href="favicon.png">
        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
        <title>再來一波</title>
    </head>
    <body>
        <!-- 頁面結構寫在這裏 -->
    </body>
</html>

把視覺稿中的`px`轉換成`rem`

目前Flexible會將視覺稿分紅**100份**（主要爲了之後能更好的兼容vh和vw），而每一份被稱爲一個單位a。同時1rem單位被認定爲10a。針對咱們這份視覺稿能夠計算出：scala

1a   = 7.5px
1rem = 75px

那麼咱們這個示例的稿子就分紅了10a，也就是整個寬度爲10rem，<html>對應的font-size爲75px，

這樣一來，對於視覺稿上的元素尺寸換算，只須要原始的px值除以rem基準值便可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成爲2.346667rem * 2.346667rem。

文本字號不建議使用`rem`

前面你們都見證瞭如何使用rem來完成H5適配。那麼文本又將如何處理適配。是否是也經過rem來作自動適配。

顯然，咱們在iPhone3G和iPhone4的Retina屏下面，但願看到的文本字號是相同的。也就是說，咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏手機上看到更多文本，以及，如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px，因此咱們不但願出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小。

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr爲1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

爲了能更好的利於開發，在實際開發中，咱們能夠定製一個font-dpr()這樣的Sass混合宏：

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

有了這樣的混合宏以後，在開發中能夠直接這樣使用：