移动端适配：vw适配方案

vw (Viewport Width) 是一种长度单位，代表视口宽度的百分比。1vw 等于视口宽度的1%。在网页设计和前端开发中，vw 单位常用于实现响应式设计和屏幕适配，尤其是针对不同尺寸和分辨率的移动设备。

为什么使用vw适配？

1. 响应式: 使用vw可以确保元素的尺寸随浏览器窗口或设备屏幕的大小变化而按比例调整，实现良好的响应式布局。
2. 简化计算: 相比于传统的像素单位，vw让开发者能够更直观地根据视口比例来设定元素尺寸，无需考虑具体像素值。
3. 设计师与开发者对齐: 设计图上的百分比尺寸可以直接转换为vw单位，有助于设计与实现的一致性。

如何使用？

基于postcss插件，实现项目vw适配！

安装

npm install postcss-px-to-viewport --save-dev
 
// 如果报错,就执行以下代码安装
// npm i postcss-px-to-viewport@1.1.1 -D --legacy-peer-depv

根目录下新建 postcss.config.js文件,填入配置

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 375, // 视口宽度，对应设计稿的宽度，一般为设计稿宽度的1/10
      viewpo