1.简介
在我们编写的项目中，在本机上是完全没茅台的，那么为什么在别人的电脑上看的时候总是会有乱七八糟的问题，好比页面的样式，这是由于电脑的分辨率不同而造成的效果不一致，那么我们如何调节分辨率来进行测试看效果，进而调节样式呢，可参考使用Chrome浏览器插件切换分辨率,有人会说，这种方式太麻烦了，还要一个一个的调，那么有没有其他方式可以使他自适应呢？
2.对比
-
对于未使用自适应的页面例如下图：
未使用自适应在本机运行效果 -
当使用谷歌插件，调节分辨率之后的效果如下：
未使用自适应在其他分辨率上运行效果 -
而使用了自适应，在调节分辨率之后的效果如下图所示:
使用自适应在其他分辨率上运行的效果
3.安装配置自适应
3.1. 方式一
- 通过如下命令安装postcss-px-to-viewport
npm install postcss-px-to-viewport -save-dev
- 在vue.config.js文件中添加如下配置
module.exports = {
css: {
// extract: IS_PROD,
sourceMap: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 需要转换的单位，默认为"px"
viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920
// viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度
unitPrecision: 3, // 单位转换后保留的精度
propList: [ // 能转化为vw的属性列表
"*"
],
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
})
]
}
}
},
}
3.2. 方式二
- 运行如下命令：
npm i amfe-flexible postcss-px2rem -S
- 在main.js中引入amfe-flexible，如下所示：
import Vue from 'vue'
import App from './App.vue'
//引入amfe-flexible
import 'amfe-flexible'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 在vue.config.js（没有则自行创建）文件中进行如下配置：
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10
require('postcss-px2rem')({remUnit: 192}),
]
}
}
},
}
补充一：使用了postcss-px2rem之后，如果部分不想让px转为rem可使用如下方式进行
//不想转换可以用/*no*/标识符
font-size: 99.1px !important;/*no*/
注：如果是与scss结合使用的话，可能会导致打包之后原本通过以上方法使px不转为rem的最终还是转为了rem，解决方法：
- 方法一：可通过使用大写的：PX实现转化，例如：
@media screen and (min-width: 1920px ) {
html {
font-size: 190.3PX !important;
}
}
- 方法二： 可通过在css中进行注释方法使用，例如：
<style>
@media screen and (min-width: 1920px ) {
html {
font-size: 190.3px !important; /*no*/
}
}
</style>
- 方法三： 通过配置的方式解决，在vue.config.js为sass配置outputStyle: 'expanded'，尝试了几次发现还是没效果，于是果断选择前两种方法，简单明了，如有大神配置可以生效，欢迎在评论区里留言，等你哟！biubiubiu！！！
补充二：进行自适应之后如果希望在指定屏幕范围内自适应，而其他部分不需要自适应，可使用媒体查询，如下所示：
//不想转换可以用/*no*/标识符
@media screen and (max-width: 1024px ) {
html {
font-size: 99.1px !important;/*no*/
}
}
@media screen and (min-width: 1920px ) {
html {
font-size: 190.3px !important;/*no*/
}
}
两种自适应方式选其一种即可，个人偏向第二种
之后重启项目即可。
至此，项目中的自适应就完成了，快去试试吧！ 别忘了点赞哟！！
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
