首先转载 公众号:高级前端进阶https://mp.weixin.qq.com/s/ZAUhIt5Mf87M61RQyZuAcg
什么是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
viewport的单位vw、vh
vw、vh将viewport分成了一百份。vw即 viewport width vh即viewport height
- 1vw等于视图单位的1%的宽度
- 1vh等于视图单位的1%的高度
如果设计稿的视图为375px 那么1vw 等于 3.75px
在配置开始之前 我们依然需要一个vue-cli项目 在项目的index.html我们需要在head标签中添加如下代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
viewport适配解决方案
之前的文章，我们用到了阿里巴巴手淘团队出品的amfe-flexible这个库。目的是为了获取到不同移动端设备下的像素比。对于rem的适配该库是至关重要的。本篇文章使用viewport适配则不再需要。
要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。这包名是不是有一种似曾相识的感觉。
没错,上篇文章中我们使用过postcss-pxtorem。这两个包不仅名字相似，功能也有相似的地方。postcss-pxtorem是将 px单位转换为rem单位。postcss-px-to-viewport则是将px单位转换为vw、vh
//引入 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
安装完成后 我们需要进行postcss插件相关的配置 在根目录新建一个名为postcss.config.js的文件,如果项目中已包含该文件则无需新建。在文件中写入如下代码:
//postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // 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/], // 设置忽略文件，用正则做目录名匹配
}
}
}
在配置上这两个包也有相似的功能。大家可以去参考一下postcss-px-to-viewport作者的github
值得注意的是:postcss-px-to-viewport同样存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将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;
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
}
}
}
}
如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。
同理 这对于其他的移动端UI组件库同样有效果。我们只需要改动这行代码即可
const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
至此，我们的viewport的适配就做好了，只需要按照设计稿的比例进行开发就可以了
配置项作用
- unitToConvert (String) 需要转换的单位，默认为"px"
- viewportWidth (Number) 设计稿的视口宽度
- unitPrecision (Number) 单位转换后保留的精度
- propList (Array) 能转化为vw的属性列表
- 传入特定的CSS属性；
- 可以传入通配符""去匹配所有属性，例如：['']；
- 在属性的前或后添加"",可以匹配特定的属性. (例如['position*'] 会匹配 background-position-y)
- 在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing
- "!" 和 ""可以组合使用， 例如: ['', '!font*']，将不转换font-size以及font-weight等属性
- viewportUnit (String) 希望使用的视口单位
- fontViewportUnit (String) 字体使用的视口单位
- selectorBlackList (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
- 例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
- 例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
- 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配
- 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则
- minPixelValue (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
- mediaQuery (Boolean) 媒体查询里的单位是否需要转换单位
- replace (Boolean) 是否直接更换属性值，而不添加备用属性
- exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
- 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
- 如果传入的值是一个数组，那么数组里的值必须为正则
include (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: //src/mobile//) - 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
- 如果传入的值是一个数组，那么数组里的值必须为正则
- landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
- landscapeUnit (String) 横屏时使用的单位
- landscapeWidth (Number) 横屏时使用的视口宽度
