笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

点击上方 高级前端进阶，回复 “加群”

加入我们一起学习，天天进步

前言 ​

前段时间我的移动端适配解决方案 [2] 一文在评论区引发了激烈的讨论。其中讨论最多的就是，移动端 rem 的适配已经淘汰了，目前大家使用的都是viewport。lib-flexible作者也在 github 明确的表示lib-flexible这个解决方案可以放弃使用了。

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。

看到大家的讨论, 我受益匪浅。在这里也向那些阅读过我之前那篇移动端适配解决方案 [3] 文章的同行们说一声对不起。rem 适配方案确实是已经淘汰了。

本文带大家一起来看看评论区所说的viewport适配解决方案。

什么是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 >复制代码

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.jsmodule.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[4]

值得注意的是:postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。比如在设计稿为 750px 时使用 vant 组件库会将 vant 组件的样式缩小。

解决第三方组件库兼容问题 ​

vant 组件库的设计稿是按照 375px 来开发的。因此在viewportWidth为750px时会出现转换问题。

// postcss.config.jsconst 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 的适配就做好了，只需要按照设计稿的比例进行开发就可以了。

最后 ​

文章若有不足之处，还请大家批评指出。

感谢您观看此篇文章 希望能给个👍评论收藏三连！你的点赞就是我写作的动力。

关于本文

作者：李知恩 ​

https://juejin.cn/post/7061866685166256142

周六直播，记得预约喔~

直播现场会送 4 本技术书（各 2 本），预约走起

The End

如果你觉得这篇内容对你挺有启发，我想请你帮我三个小忙：

1、点个 「在看」，让更多的人也能看到这篇内容

2、关注官网 https://muyiy.cn，让我们成为长期关系

3、关注公众号「高级前端进阶」，公众号后台回复 「加群」 ，加入我们一起学习并送你精心整理的高级前端面试题。

》》面试官都在用的题库，快来看看《《



最后不要忘了点赞呦！

祝 2022 年暴富！暴美！暴瘦！