• 微信
当前位置:首页 >> 建站学院 >> Web前端

移动端最佳适配解决方案

作者:玄北 时间:2022-03-18 阅读数:425人阅读

在一些帖子中经常会看到讨论说移动端rem的适配已经淘汰了,目前大家使用的都是viewport。lib-flexible作者也在github明确的表示lib-flexible这个解决方案可以放弃使用了。

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

这里可以确切地说,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 name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

viewport适配解决方案

在之前的开发中,我们都用到了阿里巴巴手淘团队出品的amfe-flexible这个库。目的是为了获取到不同移动端设备下的像素比。对于rem的适配该库是至关重要的。本篇文章使用viewport适配则不再需要。

要使用viewport适配,我们必须安装postcss-px-to-viewport这个包,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 同样存在第三方组件库兼容性的问题。比如在设计稿为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的适配就做好了,只需要按照设计稿的比例进行开发就可以了。

over~~~

转载请注明——本文源自【玄北博客】www.xuanbeiweb.cn

免责声明:本站部分文章、数据、图片来自互联网,

如果侵犯了你的权益请来信告知我们删除,否则不承担相应法律责任。邮箱:xuanbei@xuanbeiweb.cn

玄北头像

玄北

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

玄北微信

发表评论:

评论记录:

暂无评论——欢迎您的点评!