4.移动端适配--rem的配置

1、安装插件

安装: npm install lib-flexible postcss-px2rem

2、删除public中index.html里面的meta标签

删除<meta name=‘viewport‘>标签,flexible会自动为页面添加此标签,动态控制initial-scale,maximum-scale,minimum-scale等属性值

3、在main.js中导入插件flexible

导入rem的js,动态设置不同屏幕的html根元素的font-size
import ‘lib-flexible‘

4、配置vue.config.js

devServer:{},
css:{
    loaderOptions:{
        css:{},
        postcss:{
            plugins:[
                require(‘postcss-px2rem‘)({
                    //适配375的屏幕,设计图750中量出来的尺寸要除以2
                    remUnit:37.5
                })
            ]
        },
    }
}

4.移动端适配--rem的配置

上一篇:Unity3D开发学习⑦ 快乐DEBUG,修改移动错误,优化代码


下一篇:使用Jenkins+Pipline 持构建自动化部署之安卓源码打包、测试、邮件通知