3.rem布局

最新推荐文章于 2021-05-12 21:33:53 发布

转载最新推荐文章于 2021-05-12 21:33:53 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MrZhujl/p/10369279.html

文章标签：

#webpack #前端 #ViewUI

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

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

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

　　1rem = HTML 的 fontsize；

px：像素

为什么要适配？

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

兼容布局的发展过程：

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

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

手机端：

<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;                   
            HTML.style.fontSize = (winW / 1366)*16  + 'px'; 
        }
        computed();
        window.addEventListener('resize', computed, false);           
    })();</script>

视口：

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

转载于:https://www.cnblogs.com/MrZhujl/p/10369279.html