抛开祖传项目，vw适配硬核解析

移动互联网发展如火如荼的今天，手机和平板等移动端设备已经成为人们上网的主流工具。为了给用户带来更好的浏览体验，移动端网站的开发中，响应式设计已经成为不可或缺的手段之一。

在移动端响应式设计中，vw单位的使用尤为广泛。vw单位是指视口宽度的一个百分比，可以根据视口的宽度进行缩放，从而实现元素的尺寸自适应。

说到这里，就不得不提起一个技术，它就是CSS vw单位，为什么它这么重要呢？

一、什么是vw适配

vw是Viewport Width的缩写，它是一个相对单位，相对于视口宽度的一个百分比。这意味着，如果视口宽度为1000px，那么1vw就等于10px。

二、vw适配的兼容性

vw单位的兼容性非常好，在主流浏览器中都得到了支持，包括Chrome、Firefox、Safari、Edge和Opera。

但是，在IE浏览器中，vw单位的兼容性较差。在IE 9及以下版本中，vw单位不被支持，在IE 10和11中，vw单位的支持也存在一些问题。

三、如何引入vw适配

在webpack构建的移动端H5项目中，引入vw适配的步骤如下：

1. 安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

2. 在webpack的postcss配置中加入postcss-pxtorem插件：

postcss: {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 100,
      unitPrecision: 5,
      propList: ['*']
    })
  ]
}

3. 在移动端H5项目的CSS代码中，使用vw单位来定义元素的尺寸。

以下是一个使用vw单位的CSS代码示例：

body {
  font-size: 1.2vw;
}

.header {
  width: 100vw;
  height: 10vw;
}

.content {
  width: 80vw;
  margin: 0 10vw;
}

.footer {
  width: 100vw;
  height: 5vw;
}

上面的代码中，我们使用了vw单位来定义元素的字体大小、宽度和高度。当视口宽度发生变化时，元素的尺寸也会随之发生变化，从而实现元素的尺寸自适应。

四、注意点

• 将font-size设为100px来实现页面整体的缩放
• 引入适配解决方案如lib-flexible.js

当然，适应移动端的设备也不仅限于这一种，还有rem、em等单位，今天我们只是针对vw进行了专门的介绍，毕竟了解一种新的适配方法没有坏处，后期也可能会因为某些项目的特殊性需要我们进行这方面的处理。