以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
})
]
})
