源文：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

1）普通js、jquery專案使用

頁面最開始引入第三方cdn的：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

或者下載zip檔案引入

2）vue中使用：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

然後將視覺稿的px轉換rem:

 由於淘寶團隊在Flexible中(上面引入的js中)會將視覺稿分成100份（主要為了以後能更好的相容vh和vw），

每一份稱為一個單位a,而1rem=10a，也就是說會在將視覺稿等分成100a同時也可以認為等分成10rem，

比如ui給的視覺稿尺寸是750px(視覺稿尺寸一般都是640px、750px、1125px,因為要考慮Retina屏)

那html的font-size就是750/10=75px;

比如現在設計稿一個圖片高度是176px，那在程式碼中就要寫176/75=2.346667，所以這個圖片在程式碼中

就是2.35rem。

每次都去計算開發效率會很慢，所以淘寶團隊基於sublime開發了一個外掛：https://github.com/flashlizi/cssrem

字型不要使用rem：

//data-dpr是引入的js中的屬性

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;
 }

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)