首页 > 其他分享> 文章详细

react+lib-flexible适配浏览器宽度配置

2021-02-25 11:05:23 阅读：385 来源： 互联网

标签：lib px2rem 适配 postcss js react flexible config

主要是通过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

标签：lib,px2rem,适配,postcss,js,react,flexible,config
来源： https://www.cnblogs.com/min77/p/14445747.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react+lib-flexible适配浏览器宽度配置