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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的使用flexible适配移动端h5页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。