移动端vw适配方案

发表于 | 分类于

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

       1. 什么是vw适配
       2. vw适配的兼容性
       3. 如何在移动端H5项目webpack构建中引入vw适配
       4. 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)
       5. 我为小伙伴们准备的一波福利: 开箱📦即用的vw配置webpack构建
       6. 实际开发中vw适配的应用
       7. vw适配的坑以及爬坑姿势
       8. 文章末尾有彩蛋哟😍颠覆你的开(ban)发(zhuan)体验

一. 什么是vw适配

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

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

二. vw适配的兼容性

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

pvu

2.1.1 原理

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

2.1.2 如何使用

1
$ npm i -S viewport-units-buggyfill
1
2
3
4
5
const vub = require('viewport-units-buggyfill')

window.addEventListener('load', () => {
  vub.init({ hacks: window.viewportUnitsBuggyfillHacks })
})
1
2
3
4
/* 对图片的特殊处理 */
img { 
  content: normal !important; 
}

2.2 兼容的范围

vw-buggyfill

2.3 测试用例

vw-test

三. 如何在移动端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这样的视窗单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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)

1
npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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

问题:

preset-env

解决:

1
2
$ npm un -D postcss-cssnext
$ npm i -D postcss-preset-env
1
2
3
4
5
6
7
8
9
10
// your-project/.postcssrc.js

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

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

问题:

preset-env
preset-env

解决:

1
$ npm i -D postcss-import postcss-url

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

问题:

cssnano-advance

解决:

1
$ npm i -D cssnano-preset-advanced

五. 我为小伙伴们准备的一波福利: 开箱📦即用的vw配置webpack构建

5.1 采用最新npm依赖版本的豪华配置, 可npm-check-update

jsl-webpack-vue-h5😎 欢迎star⭐️

1
2
3
4
5
6
7
8
9
// ...
"devDependencies": {
    "@babel/core": "^7.1.6",
    "babel-loader": "^8.0.4",
    "vue-loader": "^15.4.2",
    "webpack": "^4.25.1",
    // ...
  }
// ...

5.2 采用vue-cli2的配置

jsl-vue-cli2-vw-layout

1
2
3
4
5
6
7
8
9
// ...
"devDependencies": {
    "babel/core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "vue-loader": "^13.3.0",
    "webpack": "^3.6.0",
    // ...
  }
// ...

5.3 采用vue-cli3的配置

jsl-vue-cli3-vw-layout

1
2
3
4
5
6
7
// ...
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-service": "^3.1.4",
    // ..
  }
// ...

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

6.1 在css中写样式

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

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

       编译出来的CSS：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 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适配的坑以及爬坑姿势(欢迎补充atbulbs@gmail.com)

7.1 注意viewport的变化

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

7.2 html2canvas

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

1
2
3
.target-el {
  content: "";
}

八. 说好的彩🍭蛋🥚

8.1 彩蛋a: stylus让你用更优雅 姿势的撸业务代码

8.2 彩蛋b: user snippets 和 emmet/zen coding 让你成为风一般的爱(ban)码(zhuan)仕(de)😂

happy hacking~!