PostCss移动端适配设置

因为最近又在做移动端的项目,之前也使用过postcss来做过H5移动端的项目,开发体验也是非常的不错,所以还是觉得这款插件真心不错,做个笔记记录一下!

使用postcss插件来处理移动端适配问题~
当然啦,这个插件不限于什么框架,这里只是拿 react 为例!
如果是 vue脚手架 来配置的话,大同小异,可以直接跳到第二步来看!

1.安装react脚手架,并暴露webpack配置项

create-react-app demotest //创建react项目；
//react 脚手架默认是不会暴露webpack.config.js 配置文件的,需要我们手动暴露
npm run eject //手动暴露 webpack配置文件信息

等待命令完成...你会发现多了一个config文件夹.如下图:

image.png

2.下载postCss

npm install postcss-pxtorem --save-dev //下载安装postCss

3.配置
在config文件夹下,打开 webpack.config.js 文件
找到 getStyleLoaders 修改配置如下:

 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { 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: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),

            require('postcss-pxtorem')({
              rootValue:100,
              propWhiteList: [],
              minPixelValue:2,
            }),

            // 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.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }
    return loaders;
  };

4.添加rem计算代码

一般情况下,移动端的设计图稿件都是750px为基准,后面在详细说这个问题!先添加这段rem计算代码到public文件夹下的index.html文件中!

  <script>
        ( function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth
                    if (!clientWidth) return
                    docEl.style.fontSize = 100 * ( clientWidth / 750 ) + 'px' //iphone6 clientWidth=375
                }
            if (!doc.addEventListener) return
            win.addEventListener(resizeEvt, recalc, false)
            doc.addEventListener('DOMContentLoaded', recalc, false)
        } )(document, window)
    </script>

在说一下设计稿一般是750为基准的问题!
大家都知道我们前端开发的时候都是以手机宽度375的为标准来布局,至于为什么,我这边也说不清楚,有想详细了解的请自行查询一下!
那么750的设计稿到底需不需要将宽高除以2呢?
其实安装完这款插件完全不用考虑这些了!
最后,我们来写一个demo看一下效果!

.w750{
    font-size: 30px;
    width:  750px;
    height: 400px;
    background: aqua;
}


    <div className="w750">
        750设计图要求大小: 字体 30, 宽度 750, 高度 400, 背景颜色 aqua
        <hr/>
        渲染到375的设备上应该都会除以二了所以我的在375的设备上的实际大小:字体15 宽度375 高度400 背景颜色aqua
    </div>

下面是效果图:

image.png

可以看到当手机屏幕为375的时候:
class 为 .w750渲染出来的宽高为 375*200 ,当手机屏幕大小发生变化时,这个数值也会发生自适应的变化!
这个时候我们只需要按照750的设计稿写大小就可以了,postcss 会自动帮我们进行转换!