移动端适配方案-vw 基于postcss插件

_s七月

已于 2024-06-19 16:57:16 修改

阅读量534

点赞数 23

文章标签： postcss 前端 javascript vue

于 2024-06-19 16:42:59 首次发布

本文链接：https://blog.csdn.net/qq_59572992/article/details/139805311

版权

背景：

在这个科技日益发达的环境下，各种各样的智能机层出不穷，我们前端都难免会接触到移动端的开发，而开发移动端，那就不可或缺的要说到移动端适配了，毕竟现在的智能机的宽度都是有区别的，而我们所开发的页面布局不能有随意的变动，今天就来讲一下移动端适配方案 --- vw。

vw是一个相对单位(相对于当前设备的视口宽度)

vw是：viewport width 视口宽度单位

100vw就是当前全部的视口宽度，1vw = 1/100视口宽度

例如：

当前屏幕视口为375像素，100vw就是375像素，1vw就是3.75像素，如果屏幕视口为414像素，1vw就是4.14像素。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

首先，不管是使用vw还是vh，HTML的视口标签一定需要加，因为视口宽度默认是980，加这个可以让视口等于我们设备的宽度。

要基于postcss插件去进行vw适配，我们需要先下载postcss插件：

npm install postcss-px-to-viewport -D

或者用

yarn add -D postcss-px-to-viewport

然后我们在项目的根目录新建postcss.config.js文件，填入如下配置(根目录，就是跟src平级)

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // vw适配的标准屏的宽度
      // 根据设计图改动
      viewportWidth: 375
    }
  }
}

配置完这些我们就可以去项目里测试一下

.box {
   width: 300px;
   height: 300px;
   background-color: pink;
 }

我们可以看到px单位已经自动转化成vw单位了，到这里就说明已经配置成功了。

关注