Vue移动端与PC端适配方案viewport+postcss-px-to-viewport
优点：
- 不需要换算及转换系数
- 某些属性不需要转换为REM、VW等
- 可以全部使用px单位
lib-flexible 作者推荐，方便好用
什么是viewport:
viewport翻译成中文的意思大致是视图、视窗。在移动端设备中,整块显示屏就相当于视图、视窗。但这种说法也并不完全正确。因为在移动端设备中,浏览器视图并不是整个屏幕。因此viewport又被分为了3种 layout viewport(布局视口)、visual viewport（视觉视口）、ideal viewport（理想视口）
为了能够适配到pc端开发页面中,大部分浏览器把viewport的宽度设为了980px 这个浏览器默认设置的视图被称为 layout viewport。我们可以使用document.documentElement.clientWidth 来获取。
由于 layout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被称为visual viewport我们可以使用window.innerWidth来获取。
现在我们已经有两个viewport了,layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的ideal viewport。
ideal viewport 并没有一个固定的尺寸，不同的设备拥有不同的 ideal viewport。比如iphone5的 ideal viewport是 320px 而 iphone6s的 ideal viewport却是 375px
使用方法：
- 下载插件postcss-px-to-viewport
- 根目录下创建配置文件postcss.config.js
- 添加所需要的配置项
//引入 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
-
//postcss.config.js
-
-
module.
exports = {
-
plugins: {
-
'postcss-px-to-viewport': {
-
unitToConvert:
"px",
// 要转化的单位
-
viewportWidth:
1920,
// UI设计稿的宽度
-
unitPrecision:
6,
// 转换后的精度，即小数点位数
-
propList: [
"*"],
// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-
viewportUnit:
"vw",
// 指定需要转换成的视窗单位，默认vw
-
fontViewportUnit:
"vw",
// 指定字体需要转换成的视窗单位，默认vw selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
-
minPixelValue:
1,
// 默认值1，小于或等于1px则不进行转换
-
mediaQuery:
true,
// 是否在媒体查询的css代码中也进行转换，默认false
-
replace:
true,
// 是否转换后直接更换属性值
-
exclude: [
/node_modules/],
// 设置忽略文件，用正则做目录名匹配
-
include:
undefined,
// 如果设置了include，那将只有匹配到的文件才会被转换
-
landscape:
false,
// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-
landscapeUnit:
'vw',
// 横屏时使用的单位
-
landscapeWidth:
1920
// 横屏时使用的视口宽度
-
}
-
}
-
}
需要注意的配置：
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
vant组件库兼容问题：
vant组件库的设计稿是按照375px来开发的。因此在viewportWidth为750px时会出现转换问题。
-
// postcss.config.js
-
const path =
require(
'path');
-
-
module.
exports =
({ webpack }) => {
-
const viewWidth = webpack.
resourcePath.
includes(path.
join(
'node_modules',
'vant')) ?
375 :
750;
-
//如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。拼接的原因是Windows和iOS系统的路径转义符不一样Windows是“/”，ios是“\”
-
return {
-
plugins: {
-
autoprefixer: {},
-
"postcss-px-to-viewport": {
-
unitToConvert:
"px",
-
viewportWidth: viewWidth,
-
unitPrecision:
6,
-
propList: [
"*"],
-
viewportUnit:
"vw",
-
fontViewportUnit:
"vw",
-
selectorBlackList: [],
-
minPixelValue:
1,
-
mediaQuery:
true,
-
exclude: [],
-
landscape:
false
-
}
-
}
-
}
-
}
效果图：
