React移动端vm适配方案

最新推荐文章于 2024-08-23 08:02:07 发布

weixin_34292287

最新推荐文章于 2024-08-23 08:02:07 发布

阅读量1k

点赞数

文章标签： javascript webpack json ViewUI

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

版权

添加postcss插件

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
复制代码

在config-overrides.js里引入（也可以使用eject在webpack.config.js里配置，此处不暴露webpack)

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');
复制代码

在override里加入

    
    addPostcssPlugins([require("postcss-flexbugs-fixes"),
        postcssAspectRatioMini({}),
        postcssPxToViewport({
            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: ['.ignore', '.hairlines'], // (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. 
        }),
        postcssWriteSvg({
            utf8: false
        }),
        postcssCssnext({}),
        postcssViewportUnits({}),
        cssnano({
            // preset: "advanced", 
            autoprefixer: false,
            "postcss-zindex": false
        })
    ])
复制代码

以上即可上使用,若报 query 'dead' 错误，browers不支持修改pakage.json文件的browserslist为下:


  "browserslist": [
    ">1%",
    "last 4 versions",
    "Firefox ESR",
    "not ie < 9",
    "Android > 4.4",
    "IOS >= 8"
  ]
复制代码

npm start即可

适配其他不兼容机型

在 pulic/index.html 中头部添加

<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>
复制代码

body尾部添加：

<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>
复制代码

viewport-unit-buggyfill会引起部分浏览器无法显示图片，在全局中添加以下

img{
  //修正viewport-unit-buggyfill带来的影响
  //比如img和伪元素::before(:before)或::after（:after）。
  //在img中content会引起部分浏览器下，图片不会显示。
  content: normal !important;
}
复制代码

参考连接： www.w3cplus.com/mobile/vw-l…