移动端自适应解决方案vw(以react为例)-阿里云开发者社区

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

2024-03-08 144

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 移动端自适应解决方案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>

项目中有遇到的坑

cssnano 如果你的版本为：4+ 以上，请在配置中如下方案配置：

cssnano({
   "cssnano-preset-advanced": {
       zindex: false,
       autoprefixer: false
   },
})

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

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

ios 系统下img不显示问题，解决方案如下：

img {
   content: normal !important; /*vw布局 img属性会默认加上content，导致显示不出图片的bug*/
}

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;
}

有伪类使用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')
}

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

todos

目前为了解决antd-mobile等第三方UI样式也能被转换成vw，当前的临时做法是让插件也转换node_modules里的第三方库

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