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

 

 

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