移動端自適應之flexible

移動端自適應之flexible

做用：flexible的做用是使頁面能夠適配不一樣移動終端

原理：在頁面html標籤上添加style = "font-size: 36px;"樣式，設置字體大小是屏幕寬度的十分之一。而後頁面佈局使用rem單位。

VUE:在vue-cli中須要使用lib-flexible

在組建中引入便可

npm i lib-flexible --save

import 'lib-flexible'

注意：

須要在html頁面中添加移動端兼容代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

固然，rem的計算是十分麻煩的，在vue中可以使用  px 轉 rem 工具：px2rem-loader

工具教程詳見：http://hjingren.cn/2017/06/16/基於vue-cli配置移動端自適應/

 

 

鑽研不易，轉載請註明出處。。。。。。