3.rem布局

rem布局：现在移动端最流行的方式；

em：是相当于父级元素或者自身的 font-size 值，如果自身有 font-size 优先走自身；

rem：是一个像素单位（root（根 --> html）em）；是相对于页面 HTML 的 font-size

　　1rem = HTML 的 fontsize；

px：像素

---

 

为什么要适配？

　　因为每款手机的屏幕尺寸不一样，同一个应用在不同的手机上面显示是不一样的，我们前端要做到所有的手机都兼容。

兼容布局的发展过程：

　　media --> 百分比 --> table --> rem

rem 适配，可以通过手机屏幕的大小动态的计算 html 的 fontSize 大小来控制页面的布局尺寸，达到不同机型屏幕适配的目的。

 

<script>，放在 <style>标签 上面

手机端：

<script>
    (function anonymous() {
        function computed() {
            let HTML = document.documentElement,
                winW = HTML.clientWidth,
                desW = 750;
            if (winW >= desW) {
                HTML.style.fontSize = '100px';
                return;
            }
            HTML.style.fontSize = winW / 750 * 100 + 'px'; //=>HTML中单独编写的代码尽量不要出现{}等操作，例如：ES6模板字符串，否则WEBPACK编译失败
        }
        computed();
        window.addEventListener('resize', computed, false);           
    })();
</script>

pc端：

<script>
    //动态计算根节点的fontSize，让rem自动适配（注意：全局都用rem单位）
    (function anonymous() {
        function computed() {
            let HTML = document.documentElement;
            winW = HTML.clientWidth;
　　　　　　　// 这里是假设在 1366px 宽度设计稿的情况下 1rem = 100px； 可根据实际请求修改
            HTML.style.fontSize = (winW / 1366) * 100  + 'px'; 
        }
        computed();
        window.addEventListener('resize', computed, false);           
    })();
</script>

 

视口：

　　布局视口 --> 视觉视口 --> 理想视口；