从一个祖传项目谈移动端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适配方案来带我出坑呢, 此篇文章即该方案的讲解

经过阅读此篇文章, 你将有以下收获

1. 什么是vw适配
2. vw适配的兼容性
3. 如何在移动端H5项目webpack构建中引入vw适配
4. 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)
5. vw适配的坑以及爬坑姿式
6. 实际开发中vw适配的应用
7. 我为小伙伴们准备的福利: 开箱即用的vw配置webpack构建

一. 什么是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

七. 说好的福利, 开箱即用的H5开发VW适配方案的webpack项目构建, 欢迎点击Star小星星

github.com/atbulbs/all…

happy hacking~!