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

标签：plugin   nim   public   loader   元素   属性   安装插件   npm   lib   

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的配置

标签：plugin   nim   public   loader   元素   属性   安装插件   npm   lib   

原文地址：https://www.cnblogs.com/mu--yu/p/14289281.html