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

最新推荐文章于 2024-06-26 10:38:28 发布

置顶 Boale_H

最新推荐文章于 2024-06-26 10:38:28 发布

阅读量1.4k

点赞数

分类专栏：项目框架搭建文章标签： javascript 前端 webpack html

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/boale_h/article/details/109091455

版权

项目框架搭建专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

文章参考

https://github.com/caoxiaoke/react-vw-layout
https://www.cnblogs.com/musi03/p/10677492.html
https://github.com/gaohan1994/react-vw-layout
https://blog.csdn.net/liyunkun888/article/details/91868776
https://www.cnblogs.com/xushengguan/p/12356517.html
https://blog.csdn.net/weixin_44533589/article/details/108204718
https://www.jianshu.com/p/ae0623fac11e

https://www.w3cplus.com/mobile/vw-layout-in-vue.html
https://www.w3cplus.com/css/vw-for-layout.html
https://segmentfault.com/a/1190000014185590
https://www.chrisyue.com/please-dont-use-rem-to-implement-flexible-layout-in-mobile-device.html
https://www.jianshu.com/p/7139c05c7971
https://www.cnblogs.com/ttjm/p/12059713.html
https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
https://www.jianshu.com/p/309bda77c82a
https://www.cnblogs.com/zy20160429/p/8915637.html
https://www.yht7.com/news/11942
https://www.pianshen.com/article/5025263353/
https://blog.csdn.net/weixin_45784283/article/details/105482067

Boale_H

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
移动端自适应解决方案vw(以react为例)

移动端自适应解决方案vw---以react为例前言安装依赖配置config下的webpack.config.js兼容低版本安卓项目中有遇到的坑todos文章参考前言在之前，我们曾使用过淘宝的lib-flexible实现移动端的自适应解决方案，但是lib-flexible更推荐使用vw作为移动端自适应的解决方案接下来我们将配置vw作为移动端的自适应解决方案（以react为例）安装依赖npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt
复制链接

扫一扫

专栏目录