React项目使用vw适配移动端

最新推荐文章于 2025-07-08 15:33:22 发布

转载最新推荐文章于 2025-07-08 15:33:22 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c889f56e51d45192c4a7f83

文章标签：

#javascript #webpack #ViewUI

打开自定义配置选项

yarn eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y
复制代码

修改配置

配置使用scss

修改config文件夹的webpack.config.dev.js和webpack.config.prod.js

# 第一处是：  （大约167行左右）
test: /\.css$/ 变成 test: /\.s?css$/  
# 第二处是： （大约217行左右）
{loader: require.resolve('sass-loader')}
复制代码

安装sass插件

yarn add node-sass sass-loader -D
复制代码

安装postCss插件

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -D
复制代码

配置`postcss`

在webpack.config.dev.js和webpack.config.prod.js文件中进行如下修改

// 引入
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
// 使用
{
    loader: require.resolve('postcss-loader'),
    options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
                browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
            }),
            postcssAspectRatioMini({}), // 用来处理元素容器宽高比
            postcssWriteSvg({
            // 用来处理移动端1px的解决方案
                utf8: false,
            }),
            postcssCssnext({}), // 让项目使用CSS未来特性 并对其做兼容性处理
            postcssPxToViewport({
                viewportWidth: 375, // 视窗的宽度，对应我们设计稿的宽度，一般是750
                viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
                unitPrecision: 3, // 指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
                viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
                selectorBlackList: [
                    '.ignore',
                    '.hairliness',
                ], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值。
                mediaQuery: false, // 允许在媒体查询中转换`px`
            }),
            postcssViewportUnits({}), // 给CSS的属性添加content的属性 配合viewport-units-buggyfill解决个别手机不支持vw
            cssnano({
                // 压缩和清理CSS代码
                autoprefixer: false,
                'postcss-zindex': false,
            }),
        ],
    },
},
复制代码

VW兼容方案

- 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在public/index.html引入它们
- 在<head></head>中引入阿里cdn:<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
- 在HTML文件中调用viewport-units-buggyfill
```

<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>
复制代码
```
- 前面配置的postcss-viewport-units插件。这个插件将让你无需关注content的内容，插件会自动帮你处理。