移动端rem布局的两种实现方法

移动端rem布局是一种相对于传统px布局更加灵活的布局方式，在不同设备上展现的效果更加统一和协调。在移动端开发中，rem布局已经成为了一种重要的布局方式，下面我们详细讲解rem布局的两种实现方法。

方法一：基于JS动态改变根元素字体大小

1. 在head标签中添加以下代码：

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script>
        var docEl = document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
        if (!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    </script>

1. 接着，在CSS中使用rem单位，如下所示：

    .example {
        font-size: 0.32rem;
        width: 2.4rem;
        height: 1.2rem;
    }

以上的代码效果是，当屏幕大小为750px时，font-size等于100px；当屏幕大小为375px时，font-size等于50px。

方法二：使用postcss-pxtorem自动将px转换为rem

1. 首先，在项目中安装 postcss-pxtorem 插件，具体命令如下：

    npm install postcss-pxtorem --save-dev

1. 在项目中增加postcss.config.js文件，其中，设计稿宽度为750，比如代码如下所示：

    module.exports = {
        plugins: [
            require('postcss-pxtorem')({
                rootValue: 100,
                propList: ['*'],
                minPixelValue: 2,
                selectorBlackList: []
            }),
        ]
    }

1. 接着，在CSS中使用px单位，在代码进行编译的时候，它会自动转换为rem单位，比如以下代码：

    .example {
        font-size: 32px;
        width: 240px;
        height: 120px;
    }

以上的代码编译后会变成如下所示：

    .example {
        font-size: 0.32rem;
        width: 2.4rem;
        height: 1.2rem;
    }

以上为两种rem布局实现的完整攻略，希望对你有所帮助。