屏幕适配

83 阅读1分钟
方案一:postcss
`   1.安装下面2个包:
    npm install postcss-pxtorem --save-dev
    npm install --save-dev autoprefixer
    
    2.在vite.config.js中加下面这段代码
    css:{
        postcss:{
        plugins:[
            require('autoprefixer')(),
            require('postcss-pxtorem')(
            {
                rootValue: 10,
                unitPrecision: 6,
                propList: ['*', '!border'], // 除 border 外所有px 转 rem
                selectorBlackList: ['html'] // 过滤掉.am-开头的class,不进行rem转换
            }
            )
        ]
        }
    }
    3.app.vue中加下面的dpr
    onMounted(()=>{
        let dpr = window.devicePixelRatio
        document.documentElement.style.fontSize =  (window.screen.width/140)/dpr + "px"
    })
    4.把index.vue、echart中的配置文件中行内样式单位用rem写
    `