vue pc端适配

以1920px的设计稿为基准，使用postcss-plugin-px2rem自动将px转rem

1.新建一个response.scss

html{
    font-size: 10px;
    width: 100%;
    height: 100%;
    overflow: auto;
    min-width: 1280px;
    @media screen and (min-width:1280px) and (max-width:1369px){font-size:11px;}
    @media screen and (min-width:1369px) and (max-width:1440px){font-size:12px;}
    @media screen and (min-width:1441px) and (max-width:1600px){font-size:14px;}
    @media screen and (min-width:1601px) and (max-width:1800px){font-size:16px;}
    @media screen and (min-width:1801px) and (max-width:1920px){font-size:16px;}
    @media screen and (min-width:1921px){font-size: 20px;}
}

2.在main.js中引入该文件

import '@/assets/styles/response.scss'

3.在项目根目录下新建postcss.config.js

module.exports = () => ({
    plugins: [
        require('autoprefixer')(),
        require('postcss-plugin-px2rem')({
            rootValue: 16,
            selectorBlackList: [/^html$/, /^body$/],
            propList: ['*'],
            replace: true,
            minPixelValue: 1.01,
            mediaQuery: false,
            unitPrecision: 5
        })
    ]
})