React项目使用vw适配移动端

时间 2019-12-01

标签 react 项目使用适配移动栏目 React 繁體版

原文原文链接

打开自定义配置选项

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的内容，插件会自动帮你处理。

React项目使用vw适配移动端

打开自定义配置选项

修改配置

配置使用scss

安装postCss插件

配置postcss

VW兼容方案

配置`postcss`