rem的自适应

Posted 2020-08-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem的自适应相关的知识，希望对你有一定的参考价值。

关于字体大小的自适应，最近用的很火的就是rem。自从认识了rem,我也用的很起劲，可是在项目实践中，也踩过了一些坑，整理如下，最终发现有一个相对而言比较完美的解决方案。

1、什么是rem？
rem是一种长度单位，任何能定义XXpx的地方，都能定义为XXrem。和px固定大小不同，rem是相对于根元素<html>的相对单位，简单说明下：

技术分享

PS:瞧见没，p标签里面的文字大小是相对于根元素html的而不是相对于其父元素div的。

2、rem响应式方案1：通过JS检测屏幕大小自动改变根元素html字体大小的值
既然所有标签都是相对于html的，那就可以通过JS检测屏幕大小而自动改变根元素html字体大小的值呀，这样不就实现了字体大小的响应式吗~~

JS如下：

(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 = 10 * (clientWidth / 320) + ‘px‘; //以320宽，10px为基准
        };
    if (!doc.addEventListener) {return;}
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

这段JS的关键语句就是：`docEl.style.fontSize = 10 * (clientWidth / 320) + ‘px‘;其中clientWidth在iPhone5或5S下是320px,iPhone6下是375px,iPhone6P下是414px等等...在前期的项目中，我一直都是这个JS控制的，但是发现木有，页面宽度越来越大，根元素也会越来越大，木有上限，当超过了某个临界值时，页面展示就会越来越不好看了，show如下：

技术分享

其实到这，就差不多兼容手机的各种大小屏幕了，但是屏幕在大点（比如各种pad屏幕）就不是那么好看了...继续

技术分享

so,有木有更好的解决方案呢？那肯定有啦...

2、rem响应式方案2：通过css3 media媒体查询，在一定的屏幕尺寸范围内，给根元素设定一个值。

CSS如下：

@media only screen and (max-width: 375px) {
    html{font-size: 10px;} /*手机小屏幕*/
}
@media only screen and (min-width: 376px) and (max-width: 480px) {
    html{font-size: 12px;} /*手机中屏幕*/
}
@media only screen and (min-width: 481px) and (max-width: 540px) {
    html{font-size: 14px;}/*手机大屏幕*/
}
@media only screen and (min-width: 541px) and (max-width: 768px){
    html{font-size: 16px;}/*手机大屏幕*/
}
@media only screen and (min-width: 769px) and (max-width: 920px){
    html{font-size: 18px;}/*pad屏幕*/
}
@media only screen and (min-width: 921px){
    html{font-size: 20px;}/*PC屏幕*/
}