zoukankan      html  css  js  c++  java
  • react+lib-flexible适配浏览器宽度配置

    主要是通过lib-flexible搭配px2rem,将设计稿中固定的px单位转换成根据屏幕大小自动计算的rem单位,达到屏幕适配的目的。

    在此之前需要先搭建好react项目。接下来是安装下面的步骤配置flexible。

    第一步,安装lib-flexible并在src/index.js中配置import 'lib-flexible/flexible';

    npm install lib-flexible -save

     

    第二步, 安装postcss-px2rem

    npm install postcss-px2rem

     

    第三步,配置px2rem

    在config/webpack.config.js中配置

    const px2rem = require('postcss-px2rem');

    在getStyleLoaders函数中找到postcss-loader的配置项,加入px2rem({ remUnit: 192, remPrecision: 8 }),然后重启项目,在浏览器中检查页面的html和body标签都自动加入style属性,若有则表示成功了。

    config/webpack.config.js修改处如下:

    {
           loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                  autoprefixer: {
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', // React doesn't support IE8 anyway
                    ],
                    flexbox: 'no-2009',
                    postcsspxtorem: {
                      "rootValue": 75,
                      "propList": ['*', '!border*'],
                      // 注意:如果有使用第三方UI如VUX,则需要配置下忽略选择器不转换。
                      // 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。
                      "selectorBlackList": ['ivu-']
                    },
                    remove: false
                  },
                  stage: 3,
                }),
                px2rem({
                  remUnit:192,
              remPrecision: 8
                })
              ],
              sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            },
          },

    如果你是新建的项目,找不到config/webpack.config.js这个文件,这个时候就需要执行一下npm run eject,

    该语句执行后会在项目中显示一下config和script文件夹,需要配置的webpack.config.js就在config文件夹中。由于我在这一步执行操作中出现报错Remove untracked files, stash or commit any changes, and try again.这里也跟大家分享一下处理方式。

    参考资源:https://blog.csdn.net/weixin_41606276/article/details/85123919

     

    当然,目前的配置满足大屏幕和小屏幕的适配,而在超大屏幕的使用上就显得不足,这是由于在插件源码中refreshRem方法提到当宽度大于540这个特定值时就不再有对应的适配,这里为了使其适配超大屏幕,需要将其中的if判断删除或注释。这里的操作与上一篇博文中的配置相同,这里就不在体现。

    具体参考:https://www.cnblogs.com/min77/p/14434896.html

  • 相关阅读:
    利用STM32播放音乐
    在MDK中使用$Sub$$和$Super$$的记录
    printf函数输出格式控制记录
    I2C软件实现
    C语言单项链表
    CreateEvent函数使用记录
    C语言宏定义使用记录
    GIT推送本地数据到远程空仓库
    2020-ECCV-Local Correlation Consistency for Knowledge Distillation阅读笔记
    2020-ECCV-Feature Normalized Knowledge Distillation for Image Classfication阅读笔记
  • 原文地址:https://www.cnblogs.com/min77/p/14445747.html
Copyright © 2011-2022 走看看