项目背景：PC端项目，因为UI设计稿1440导致开发完的UI视觉偏大，且在小屏幕浏览器上看着更大（项目中即使做了媒介查询也不行）
项目脚手架：vue-cli 3 页面布局：后台管理系统，左侧菜单，右侧内容部分
代码实现：
1.安装npm包
npm install postcss-pxtorem --save-dev
npm install postcss-loader
2、项目根目录创建.postcss.config.js
3、.postcss.config.js内容,rootValue = 设计稿的宽度/10
module.exports = {
plugins: {
// 这个工具可以实现自动添加CSS3前缀
"autoprefixer": {
overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
},
// 如果你使用rem来实现移动端多设备适配，这个工具可以把px转换为rem
"postcss-pxtorem": {
//1024 1280 1366 1440 1680 1920
rootValue: 178, // 指定转换倍率，我现在设置这个表示1rem=100px;
propList: ["*"], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
minPixelValue: 5, // 需要转换的最小值，一般1px像素不转换，以上才转换
unitPrecision: 4, // 转换成rem单位的小数点后的保留位数
selectorBalckList: [], // 匹配不被转换为rem的选择器
replace: true, // 替换包含rem的规则，而不是添加回退
mediaQuery: false // 允许在媒体查询中转换px
}
}
}
4、页面加入媒介查询，（不能在项目文件写，会被转化成rem）,根目录字体 = 设计稿宽度/10
- 超过设计稿最大宽度，固定按照设计稿设置根字体大小，屏幕变大字体和宽度不在变大
- 最小屏幕设置960px，再小出现滚动条，不再用字体适配
/*1024 1280 1366 1440 1680 1920 */
@media screen and (min-width:1780px) {
html,
body{
font-size:178px!important;/*190*/
}
}
@media screen and (max-width:960px) {
html{
font-size:90px!important;
}
/*兼容小屏*/
body{
font-size:90px!important;
}
.container{
width: 960px;
}
}
</style>
