react 脚手架项目快速实现 viewport移动端适配

前言

因为工作原因,一直在写后台管理系统,关于h5页面的一些适配了解的不多。这段时间刚好有空,就花时间去了解了一下h5的最近的适配方案。因为之前使用postcss-to-px2rem进行适配的,但是也有很久没有做过了,所以现在也学学其他的。

1,通过react脚手架创建一个react项目

npx create-react-app +项目名

  • 因为我的node版本是18.2.0的,所以react版本下载下来就变为18.2.0的版本了
  • 项目运行版本react 18.2.0

2,运行

npm run start

3,适配移动端方案 viewport

  • 1, 安装插件
# 1.npm方式:
npm install postcss-loader postcss-px-to-viewport --save-dev

# 2.yarn安装:
yarn add -D postcss-loader postcss-px-to-viewport

  • 2,准备暴露webpack.config.js之前,需要将代码进行保存,不然项目报错。
   git add .
   git commit -m "factory: 准备暴露webpack.config.js"
  • 3,准备将 webpack.config.js 通过命令行暴露出来,此步骤不可逆,如果感觉自己的webpack暴露出现问题或者想回到之前的代码,可以使用git命令进行回滚,具体操作如下。
   git log --oneline # 查看提交记录,然后复制头部的header,如下图
   git reset --hard `版本号` #回到之前版本
react 脚手架项目快速实现 viewport移动端适配_第1张图片
  • 4 暴露命令:npm run eject
    • 可能是因为react版本的不同,当进行完npm run eject这一步之后有一个报错,出现了报错信息:
    Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
    
    • 我的解决方案是eslintConfig 中加上 parserOptions 这段代码
 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false],
          "babel-preset-react-app/prod"
        ]
      }
    }
  },

参考链接:github issues

  • 5,viewport进行配置
    找到暴露出来的 webpack.config.js,在 config 文件夹中,然后对里面的数据进行配置,如果和下图类似,那么下面的结构可以这样配置
    react 脚手架项目快速实现 viewport移动端适配_第2张图片
    加入这段代码
  [
    'postcss-px-to-viewport',
    {
        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: [], // (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.
    }
  ],

结果如图
react 脚手架项目快速实现 viewport移动端适配_第3张图片

适配到此结束,下面就是一些关于适配的引申话题了,有兴趣的可以看看,没兴趣的就打道回府吧。后面想着使用vite进行适配移动端的效果。目前正在进行中,主要是通过vite搭建react项目,然后对项目进行rem适配,最后引入antd-mobile组件,在vite.config.js中进行antd-mobile按需加载。以后如果好了,会将链接放在此处,目前先占个位置

4,引申,移动端适配方案

  • 4.1 flexible方案
    • flexible方案是阿里早期的一个开源移动端适配解决方案,引用flexible后,在页面上我们统一使用rem来布局,rem 相对于html节点的font-size进行的计算,其核心代码如下:
    // set 1rem = viewWidth / 10 
    function setRemUnit () { 
       var rem = docEl.clientWidth / 10  
       docEl.style.fontSize = rem + 'px' 
    } 
    setRemUnit();
    
    通过设置document.documentElement.style.fontSize就可以统一整个页面的布局标准
  • 4.2 vh、vw方案
    • vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度window.innerHeight等分为 100 份
    • 如果视觉视口为750px,那么1vw = 7.5px,这时UI给定一个元素的宽为75px(设备独立像素),我们只需要将它设置为75 / 7.5 = 10vw

番外

通过写作,不断的提升自己。提升自己才是王道,给自己留下笔记,日后好相见。

你可能感兴趣的:(react.js,webpack,javascript)