其他分享
首页 > 其他分享> > 移动端自适应之flexible

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

 

 

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

 

标签:vue,端自,lib,rem,flexible,移动,页面
来源: https://www.cnblogs.com/s313139232/p/11084712.html