Vue项目——自适应屏幕

Vue项目——自适应屏幕

【此插件注意事项：写在html里的css样式px是转换不了rem的，还有类似h1,h6这些原生。可做事后调整】
1.安装 flexible和 postcss-px2rem【一起安装】
npm i lib-flexible postcss-px2rem --save
2.flexible和 postcss-px2rem作用
【flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比】
【postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果。】
3.使用
《1》引入lib-fiexible.
打开项目，将lib-fiexible.引入main.js中。【import ‘lib-flexible’】
注意:由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签注释！！！
《2》注释标签

《3》找到node_modules\lib-flexible\flexible.js的js文件。将屏幕宽度写死

《4》配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中。
vue-cli3创建的项目是没有vue.config.js的，但是最后你开发完了项目也要打包的时候也得手动创建这个文件！

直接copy，放到项目中
module.exports = {
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {},
postcss: {
plugins: [
//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
//假如设计图给的宽度是1920，我们通常就会把remUnit设置为192，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
require(‘postcss-px2rem’)({
remUnit: 192
})
]
}
},
},
}

remUnit :假如设计图给的宽度是1920，我们通常就会把remUnit设置为192（设计图宽度的十分之一）
重启项目，查看运行效果。调试html中的css