[移动端适配]从一个祖传项目谈移动端vw适配

2019-09-29 4,830 阅读3分钟

通过阅读此篇文章, 你将有如下收获

什么是vw适配
vw适配的兼容性
如何在移动端H5项目webpack构建中引入vw适配
大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)
vw适配的坑以及爬坑姿势
实际开发中vw适配的应用

背景故事

最近接手了一个祖传的H5项目, 用的rem适配方案, 但是当我看到css

        img.user-avatar
            position: absolute
            left: 50%
            top: -5.4rem
            border: .125rem solid #FFAB74
            width: 4.3125rem
            height: 4.3125rem
            transform: translateX(-50%)
            border-radius: 50%

        p.name
            margin-top: 0.1rem
            line-height: 0.4rem
            font-size: 0.28rem
            text-align: center
            color: #333333

我的感受是这样的

深呼吸一口气, 数了数桌上刚掉落的几根头发, 我想到何不用大漠老师的vw适配方案来带我出坑呢, 此篇文章即该方案的讲解

一. 什么是`vw`适配

1.1 `vw` 相对于视窗的宽度:视窗宽度是`100vw`, 即`window.innerWidth`大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

1.2 <<CSS世界>>作者张鑫旭老师的视区相关单位vw, vh..简介以及可实际应用场景

二. `vw`适配的兼容性

2.1 可使用`viewport`的polyfill方案来完美解决:postcss-viewport-units与它的好基友viewport-units-buggyfill

2.1.1 原理

postcss-viewport-units自动添加content, viewport-units-buggyfill再把根据content里的数据把vw单位转为px单位, 如下图

2.1.2 如何使用

$ npm i -S viewport-units-buggyfill

const vub = require('viewport-units-buggyfill')

window.addEventListener('load', () => {
  vub.init({ hacks: window.viewportUnitsBuggyfillHacks })
})

/* 对图片的特殊处理 */
img { 
  content: normal !important; 
}

2.2 兼容的范围

2.3 测试用例

三. 如何在移动端H5项目`webpack`构建中引入`vw`适配

3.1 大漠老师的原文链接

如何在Vue项目中使用vw实现移动端适配(请戳)

3.2 大漠老师所用`postcss plugins`和配置的说明

3.2.1 插一嘴, 什么是`postcss`

postcss是一个平台，其本身不对 CSS进行处理，但是通过在该平台上集成插件，可以实现对CSS的操作。

3.2.2 核心`postcss plugins`: `postcss-px-to-viewport`

把px单位转换为vw、vh、vmin或者vmax这样的视窗单位

// your-project/.postcssrc.js

module.exports = {
  "plugins": {
    // ...
    "postcss-px-to-viewport": {
    viewportWidth: 375,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是375
    viewportHeight: 667,    // 视窗的高度，根据750设备的宽度来指定，一般指定667，也可以不配置
    unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
    viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    mediaQuery: false       // 允许在媒体查询中转换`px`
}
    // ...
  }
}

3.2.2 `postcss-import`

解决@import引入路径问题, 配合postcss-url让你引入文件变得更轻松

3.2.3 `postcss-url`

处理文件，比如图片文件、字体文件等引用路径

3.2.4 `autoprefixer`

让你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码

3.2.5 `postcss-cssnext`

该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理

3.2.6 `cssnano`

压缩和清理CSS代码。在webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它. 记得将postcss-zindex设置为false, 否则z-index的值就会重置为1

3.2.7 `postcss-aspect-ratio-mini`

处理元素容器宽高比

3.2.8 `postcss-write-svg`

处理移动端1px的解决方案,该插件主要使用的是border-image和background来做1px的相关处理

3.2.9 `postcss-viewport-units`

给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作, 这是一个前面提到的解决兼容性的核心插件

四. 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)

npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano

// your-project/.postcssrc.js
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 375,     // (Number) The width of the viewport.
            viewportHeight: 667,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

如果你跟着大漠老师一顿猛操作, 安装依赖时你会发现可能会出现以下问题:

4.1 `postcss-cssnext`插件被废弃, 推荐用`postcss-preset-env`

问题:

解决:

$ npm un -D postcss-cssnext
$ npm i -D postcss-preset-env

// your-project/.postcssrc.js

module.exports = {
  "plugins": {
    // ...
    - "postcss-cssnext": {},
    + "postcss-preset-env": {},
    // ...
  }
}

4.2 如果你用`vue cli3`会缺少部分依赖

问题:

解决:

$ npm i -D postcss-import postcss-url

4.3 `cssnano`的`preset`使用了`advanced`, 需要安装对应依赖

问题:

解决:

$ npm i -D cssnano-preset-advanced

五. 实际开发中`vw`适配的应用

5.1 在`css`中写样式

在实际撸码过程，不需要进行任何的计算，直接在代码中根据UI稿写px, 如

.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}

编译出来的CSS：

.test {
    border: .5px solid #000;
    border-bottom-width: 1.667vw;
    font-size: 3.733vw;
    line-height: 5.333vw;
    position: relative;
}

5.2 在`js`和`template`中写样式, 我们定义一个转换数字为vw的工具类

// your project/src/shared/utils.js
const toVw = (num) => {
  return ((window.Number(num).toFixed(5) / 375) * 100).toFixed(5) + 'vw'
}
const UTILS = { toVw }
export default UTILS

// your project/src/components/test.vue
<template>
  <div
    :style="{
        width: toVw(size),
        height: toVw(size)
      }"
  >
  </div>
</template>


<script type="text/ecmascript-6">
import UTILS from 'shared/utils'

export default {
  props: {
    size: {
      default: 15
    }
  },
  methods: {
    toVw (num) {
      return UTILS.toVw(num)
    }
  }
}
</script>

六. `vw`适配的坑以及爬坑姿势

6.1 注意`viewport`的变化

如果你在样式中使用了vh单位, 请注意某些webView里键盘弹出时, 100vh对应的实际高度会变小

6.2 `html2canvas`

如果你有在前端截屏的需求, 刚好你用到了html2canvas插件, 而且刚好要适配ios低版本机型, 请使用0.5.0-beta4版本, 并且把加了css-content的标签的内容置空

.target-el {
  content: "";
}

6.3如果你项目里既有`rem`适配的组件, 又有`vw`的组件, 请根据需求配置`webpack`的`loader`的`exclude`和`include`

happy hacking~!