公司让做官网，使用了非常先进的nuxt.js有利于seo优化，并考虑到了移应端。为此我就头疼了，思来想去还是做成响应式的网页，这样适配机型就非常容易了，于是乎就想到了主流的移应端适配的解决方vw/vh.
一、安装postcss-px-to-viewport
npm安装
npm install postcss-px-to-viewport --save-dev 注意 (include用不了)
这里乍一看好像就没什么问题，就先按正常流程走，下完包就去正常配置就能使用了
export default {
...
...
...
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
postcss: {
// 添加插件名称作为键，参数作为值
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: "vw", // 横屏时使用的单位
landscapeWidth: 1134 // 横屏时使用的视窗宽度
}
},
preset: {
// 更改postcss-preset-env 设置
autoprefixer: {}
}
}
}
}
但是！！！
我是最开始就做的pc端的官网用的是px为单位，如果像这样直接引入这配置就会导致它自动把所有的px转换为vw,这样就导致样式全垮了。
所以！！！
我们就要把scss文件全部提出来。单独存放一个目录，然后再写一套样式适配移应端的样式
像这样，网页在不同设备上加载不同的样式，就做到了响应式布局。 然后再去配置文件中找到exclude:配置项排除pc端样式，给移应端样式做转化。 exclude填一个正则表达式 表示排除pc文件夹，但是我们无论怎么写都没办法排除， 费了老大功夫终于在GitHub上找到一个包，可以解决这个问题
"postcss-px-to-viewport": "git+https://github.com/evrone/postcss-px-to-viewport.git",
然后加include写需要转化的文件夹就完成了
