使用flexible適配移動端h5頁面

flexible是淘寶提供的一套REM手機適配的庫，用法也很是簡單

首先，在頁面中引入相關資源 包括flexible.js和flexible_css.js(用於清除默認樣式)，或者經過cdn方式引入

而後經過實際的px大小/根元素font-size的大小，就獲得了rem的值，這裏提供了一個sublime的cssrem的插件，能夠快速將px轉換成rem值，
插件地址https://github.com/flashlizi/cssrem
安裝使用
安裝
● 下載本項目，好比：git clone https://github.com/flashlizi/cssrem
● 進入packages目錄：Sublime Text -> Preferences -> Browse Packages...
● 複製下載的cssrem目錄到剛纔的packges目錄裏。
● 重啓Sublime Text。
配置參數
參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem
● px_to_rem - px轉rem的單位比例，默認爲40。
● max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。
● available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。

修改配置參數，支持在html中轉換rem

{
    "px_to_rem": 37.5,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass",".html"]
}

px_to_rem是px轉rem的單位比例，設置爲設計稿的1/10便可 ，例如咱們是750px的設計稿，則這裏能夠設置爲75，固然這個是按照2倍設計圖來計算的，假如是375px則設置爲37.5，最終這個值在html根元素中會生成font-size:37.5px

字號不使用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;
    }
}

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

@include font-dpr(16px);

固然這只是針對於描述性的文本，好比說段落文本。但有的時候文本的字號也須要分場景的，好比在項目中有一個slogan,業務方但願這個slogan能根據不一樣的終端適配。針對這樣的場景，徹底可使用rem給slogan作計量單位。

參考文章
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

做者：fozero
聲明：原創文章，轉載請註明出處，謝謝！http://www.cnblogs.com/fozero/p/8332131.html 標籤：flexible,rem