首页 > 移动平台 > 详细

Vue移动端适配之rem

时间:2020-08-31 23:45:18      阅读:109      评论:0      收藏:0      [点我收藏+]

 

一.安装插件

npm add lib-flexible postcss-px2rem

技术分享图片

 

 

 

二.在public中的index.html中删除meta标签

删除
<noscript>
  <strong>We‘re sorry but supermail doesn‘t work properly without  JavaScript enabled. Please enable it to continue.</strong>
</noscript>

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

技术分享图片

 

 

 

三.在main.js中导入插件包

 import ‘lib-flexible‘

技术分享图片

 

 

 

 

四.配置vue.config.js

    module.exports={
      css:{
    loaderOptions:{
      css:{},
      postcss:{
        plugins:[
          require(‘postcss-px2rem‘)({
            //适配375屏幕,设计图750中量出来的尺寸要/2
            //配置成37.5是为了兼容没有适配rem布局的第三方ui库
            remUnit:37.5
          })
        ]
      }
    }
  }
}

技术分享图片

 

Vue移动端适配之rem

原文:https://www.cnblogs.com/kharvey/p/13593712.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!