如何进行各个终端的页面适配(react项目安装插件 postcss-px-to-viewport)

一般我们都是按着UI稿的尺寸来写固定的px 这个习惯。

我们可以引用插件来做。(以reactApp为例)

插件是 postcss-px-to-viewport

1、先安装这个插件 这个插件会自动将样式文件中的 px 转换为 vw

javascript 复制代码
npm i postcss-px-to-viewport

2、在webpack的配置文件中(webpack.config.js),引入这个插件,并进行配置。

复制代码
(1)、先导入插件
javascript 复制代码
// pxToVw
const postcsspxtoviewport = require('postcss-px-to-viewport')

(2)、再进行配置 在 getStyleLoaders()中配置

javascript 复制代码
 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                'postcss-flexbugs-fixes',
                [
                  'postcss-preset-env',
                  {
                    autoprefixer: {
                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
                ],
                // Adds PostCSS Normalize as the reset css with default options,
                // so that it honors browserslist config in package.json
                // which in turn let's users customize the target behavior as per their needs.
                /核心代码/        
                'postcss-normalize',
                postcsspxtoviewport({
                  unitToConvert: 'px', // 要转化的单位
                  viewportWidth: 750, // UI设计稿的宽度
                  unitPrecision: 6, // 转换后的精度,即小数点位数
                  propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换        
                  viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
                  fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
                  selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,
                  minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
                  mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
                  replace: true, // 是否转换后直接更换属性值
                  landscape: false // 是否处理横屏情况
                })
              ]
              
              : [
                'tailwindcss',
                'postcss-flexbugs-fixes',
                [
                  'postcss-preset-env',
                  {
                    autoprefixer: {
                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
                ],
              ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
          },
        }
      );
    }
    return loaders;
  };

在上例的配置中,页面的参考宽高为 750 1624

这个可以根据设计稿的宽高来,这样方便!

相关推荐
前端小趴菜051 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.3 小时前
serviceWorker缓存资源
前端
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子5 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子6 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...6 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts