准备工作

viewport

viewport 指的是浏览器可视化的区域，即 window.innerWidth和 window.innerHeight的大小

css3 中与 viewport 相关的单位：

  • vw: 是 viewport’s width 的简写，1vw 等于 window.innerWidth 的1%
  • vh: 是 viewport’s height 的简写，1vh 等于 window.innerHeight 的1%
  • vmin: vmin 是当前 vw 和 vh 中较小的值
  • vmax: vmax 是当前 vw 和 vh 中较大的值

如图：

viewport 支持情况：

适配方案

简单来说就是将 px 转换为 vw，用 vw 作为基础单位进行布局，达到在不同移动设备上界面表现一直的效果。如果设计稿使用 750px 的宽度，那么 100vw = 750px，即 1vw = 7.5px。根据这个关系即可将设计图上的 px 转换为 vw 值，所幸这个计算工作有插件 postcss-px-to-viewport 帮我们完成，实际操作中我只需严格按照设计图直接在代码中写 px 即可。

实战：如何在Vue项目中使用vw实现适配

Step 1 使用 Vue-cli 构建项目

1
vue init webpack my-project

Step 2 安装PostCSS插件

使用 `Vue-cli` 构建的项目，在项目根目录下有一个 `.postcssrc.js` 文件，默认会包含三个插件：

1
2
3
4
5
6
7
module.exports = {
	"plugins": {
		"postcss-import": {},
		"postcss-url": {},
		"autoprefixer": {}
	}
}

postcss-import

postcss-import 主要功能是解决 @import 引入路径问题。

postcss-url

postcss-url 主要用来处理文件，比如图片文件、字体文件等引用路径的处理。

autoprefixer

autoprefixer 主要用来自动处理浏览器前缀的问题。

实现 vw 布局兼容方案需增加以下插件：

postcss-px-to-viewport

postcss-px-to-viewport 主要用来将 px 单位转换为 vw 、vh、 vmin 或者 vmax 这些 viewport 单位

1
2
3
4
5
6
7
8
9
npm i postcss-px-to-viewport
```	

**postcss-aspect-ratio-mini**
	
`postcss-aspect-ratio-mini` 主要用来处理元素容器宽高比。

```	
	npm i postcss-aspect-ratio-mini

postcss-cssnext

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

1
npm i postcss-cssnext

cssnano

cssnano 主要用来压缩和清理CSS代码。在 webpack 中， cssnano 和 css-loader捆绑在一起，所以不需要自己加载它。可以使用 postcss-loader 显示的使用 cssnano。

postcss-write-svg

postcss-write-svg 主要用来处理移动端 1px 的解决方案，主要使用 border-image 和 background 来做 1px 的相关处理。比如：

1
2
3
4
5
6
7
8
9
10
11
12
@svg 1px-border {
	height: 2px;
	@rect {
		fill: var(--color, black);
		width: 100%;
		height: 50%;
	}
}
.example {
	border: 1px solid transparent;
	border-img: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

安装

1
2
3
4
5
6
npm i postcss-write-svg
```	

**postcss-viewport-units**
	
`postcss-viewport-units` 主要用来给CSS属性添加 `content` 属性，配合 `viewport-units-buggyfill` 库给 `vw`、`vh`、`vmin`、`vmax`做适配的操作。这是 `vw` 布局必不可少的一个插件。

npm i postcss-viewport-units

1
2
		
###  Step 3 `.postcssrc.js` 文件中配置插件

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "autoprefixer": {}
        "postcss-aspect-ratio-mini": {},
           "postcss-write-svg": {
               utf8: false
           },
           "postcss-cssnext": {},
           "postcss-px-to-viewport": {
               viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
               viewportHeight: 1334, // 视窗高度，可不配置
               unitPrecision: 5, // 指定 'px' 转换为视窗单位值的小数位数
               viewportUnit: 'vw', // 指定需要转换成的视窗单位
               selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可自定义，可无限添加
               minPixelValue: 1, // 小于或等于 '1px' 不转换为视窗单位
               mediaQuery: false // 是否允许媒体查询中转换 'px'
               },
           "postcss-viewport-units": {},
           "cssnano": {
               preset: "advanced",
               autoprefixer: false,
               "postcss-zindex": false
           }
    }
}

1
2
		
在 `cssnano` 的配置中，使用了preset: "advanced"，所以我们需要另外安装：

npm i cssnano-preset-advanced –save-dev

1
2
3
4
5
		
只要启用了`cssnano`这个插件，`z-index`的值就会重置为1。**切记**将`postcss-zindex`设置为false。
	
	
`postcss-px-to-viewport` 中配置了 `selectorBlackList`，在不想把 `px` 转换为 `vw` 的时候，可以将 `px` 写在 `selectorBlackList ` 中定义的某个方法中，然后将改方法应用的对应的 `html` 元素上，如下：

// html

// css
.box {
width: 180px;
height: 300px;
}
.ignore {
margin: 10px;
}

// 编译后的CSS

.box {
width: 24vw;
height: 40vw;
}
.ignore {
margin: 10px; // 这个类名中写的px不会被转换
}
`

Step4 大功告成，按照设计稿写 px 即可完成适配工作。