移动端自适应解决方案vw(以react为例)

Boale_H
826 阅读3分钟

移动端自适应解决方案vw---以react为例

前言

在之前，我们曾使用过淘宝的lib-flexible实现移动端的自适应解决方案，但是lib-flexible更推荐使用vw作为移动端自适应的解决方案
在这里插入图片描述
接下来我们将配置vw作为移动端的自适应解决方案（以react为例）

安装依赖

npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt postcss-write-svg postcss-preset-env postcss-viewport-units cssnano -S

配置config下的webpack.config.js

  • 引入插件
// 引入postCss插件
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport-opt');
const postcssWriteSvg = require('postcss-write-svg');
const postcssPresetEnv = require('postcss-preset-env');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');

在这里插入图片描述

  • 引入postCss配置
// 引入postCss配置
            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', '.antd'], // (Array) The selectors to ignore and leave as px.
              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.
              // exclude: /(\/|\\)(node_modules)(\/|\\)/,
            }),
            postcssWriteSvg({
              utf8: false
            }),
            postcssPresetEnv({}),
            postcssViewportUnits({}),
            cssnano({
              "cssnano-preset-advanced": {
                zindex: false,
                autoprefixer: false
              },
            }),

在这里插入图片描述

  • 测试下vw的设置是否生效
    在这里插入图片描述

兼容低版本安卓

我们加入兼容我们android 低版本的机型hack 加入viewport-units-buggyfill配置

同学们，经过实战配置viewport-units-buggyfill之后，4.2 4.3 4.4+ 系统版本上表现都 ok,项目中主要使用flexbox 布局

demo 版本中直接引入阿里的cdn 文件，在自己项目中可以放自己公司的服务器或者项目中。

打开public/index.html，在head 中插入 viewport-units-buggyfill 和body 中使用

<head>
    <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>
</head>

<body>
<script>
	window.onload = function () {
		window.viewportUnitsBuggyfill.init({
			hacks: window.viewportUnitsBuggyfillHacks
		});
	}
</script>
<body>

项目中有遇到的坑

  1. cssnano 如果你的版本为：4+ 以上，请在配置中如下方案配置：
cssnano({
   "cssnano-preset-advanced": {
       zindex: false,
       autoprefixer: false
   },
})

在这里插入图片描述

我遇到了始终把你定位的z-index值重新计算为：1，巨坑，不然你会一口老血喷出来的。

和cssnano 3+版本配置不一样。

  1. ios 系统下img不显示问题，解决方案如下：
img {
   content: normal !important; /*vw布局 img属性会默认加上content，导致显示不出图片的bug*/
}
  1. 1px 问题，解决方案
/*1px 解决方案*/

@svg square {
   @rect {
   	fill: var(--color, white);
   	width: 100%;
   	height: 50%;
   }
}

.example-line {
   width: 100%;
   background: white svg(square param(--color #E6E6E6));
   background-size: 100% 1px;
   background-repeat: no-repeat;
   background-position: bottom left;
}

/*1px 解决方案*/

/*伪元素1px*/

.row-cell:before {
   content: " ";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #e5e5e5;
   color: #e5e5e5;
   transform-origin: 0 0;
   transform: scaleY(0.5);
   z-index: 2;
}
  1. 有伪类使用content报错 already has a ‘content’ property, give up to overwrite it. 在这里插入图片描述
    解决办法
    配置.postcssrc.js的postcss-viewport-units
'postcss-viewport-units': {
  filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before') && rule.selector.includes(':after') && rule.selector.includes(':before')
}

or

'postcss-viewport-units': {
  filterRule: rule => rule.nodes.findIndex(i => i.prop === "content") === -1
}

在这里插入图片描述

todos

  1. 目前为了解决antd-mobile等第三方UI样式也能被转换成vw，当前的临时做法是让插件也转换node_modules里的第三方库
    在这里插入图片描述
    但是这样会导致打包效率降低，应该优化正则表达式，除了antd-mobile和其他第三方UI库，node_modules里的所有文件都不参与转换
  2. 除了上述办法能解决自适应，我们还可以写scss/less函数，让其自动通过运算，将px数值转为对应vw

文章参考

github.com/caoxiaoke/r…
www.cnblogs.com/musi03/p/10…
github.com/gaohan1994/…
blog.csdn.net/liyunkun888…
www.cnblogs.com/xushengguan…
blog.csdn.net/weixin_4453…
www.jianshu.com/p/ae0623fac…

www.w3cplus.com/mobile/vw-l…
www.w3cplus.com/css/vw-for-…
segmentfault.com/a/119000001…
www.chrisyue.com/please-dont…
www.jianshu.com/p/7139c05c7…
www.cnblogs.com/ttjm/p/1205…
github.com/evrone/post…
www.jianshu.com/p/309bda77c…
www.cnblogs.com/zy20160429/…
www.yht7.com/news/11942
www.pianshen.com/article/502…
blog.csdn.net/weixin_4578…

avatar
文章
阅读
粉丝