rem布局

最新推荐文章于 2021-08-22 15:28:28 发布

原创最新推荐文章于 2021-08-22 15:28:28 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

92 篇文章

订阅专栏

本文介绍了两种常见的屏幕适配方法：一种是通过JavaScript根据屏幕宽度实时计算并设置根元素字体大小；另一种是使用CSS媒体查询为不同屏幕尺寸设定固定的根字体大小。此外，还探讨了解决子元素使用display:inline-block脱离父元素的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.方式一
根据屏幕宽度实时计算

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

2.方式二
媒体查询

html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	font-size: 20px
}

@media only screen and (min-width:400px) {
	html {
		font-size: 21.33px!important
	}
}

@media only screen and (min-width:414px) {
	html {
		font-size: 22.08px!important
	}
}

@media only screen and (min-width:480px) {
	html {
		font-size: 25.6px!important
	}
}

1rem=20px
2.设置子盒子display:inline-block为什么会脱离父盒子?
参考链接：https://segmentfault.com/q/1010000010184200
注意到rem的基准是130px,在外层盒header元素没有设置font-size的情况下，内部两个inline-block元素的line-height值就是初始值，chrome浏览器下是1.14em，而header的高度是0.6rem，这样内部的两个元素看起来就在盒外了。所以根本在于line-height行高的影响。这样解决方法就是：
1、header上设置line-height覆盖初始值, 再设置内部元素的vertical-align调整竖直方向的位置。
2、因为line-height值是基于元素自身的font-size大小设置的，所以可以改变header上的font-size，可以看看font-size从0开始不断变化的效果。