react移动端适配之vw适配 postcss-px-to-viewport插件

最新推荐文章于 2024-06-26 10:38:28 发布

前端小李

最新推荐文章于 2024-06-26 10:38:28 发布

阅读量1.5k

点赞数

分类专栏： react 文章标签： react.js postcss webpack

本文链接：https://blog.csdn.net/qq_43287934/article/details/127338934

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vw适配

vw适配实际上就是通过postcss-px-to-viewport 插件将项目中px单位转化为vw单位实现移动端适配。

react中使用实现步骤。

在我们使用postcss-px-to-viewport插件时需要修改react webpack配置，但是在react-cli中 webpack配置默认不会暴露给开发者，这个时候我们就需要想办法找到webpack配置文件，不过也很简单，react为我们提供了方法，这个方法我们称之为解压配置。
那么如何解压配置。
第一步
提交git仓库因为在暴露配置项的过程是不可逆的所以在暴露之前必须提交git。

      git add .
	git commit -m '暴露项目配置项'

第二步
使用命令解压配置项

npm run eject

解压成功后可以看到项目目录中多了两个文件夹config和scripts文件夹
那么webpack配置就在config文件夹下

安装：postcss-px-to-viewport 和 postcss-loader

npm install postcss-loader postcss-px-to-viewport --save-dev

3.配置webpack
在config文件夹下webpack.config.js配置文件中编写配置
在这里插入图片描述
750 为当前设计稿尺寸 750px = 100vw

[
  'postcss-px-to-viewport',
  {
    viewportWidth: 750, // (Number) The width of the viewport.
    viewportHeight: 1334, // (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: [], // (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.
  }
],

重启服务适配成功
自动会将px转化为vw 750px = 100vw