移动端自适应之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配置移动端自适应/

 

 

钻研不易，转载请注明出处。。。。。。