CSS—相对单位rem

一、概述

1rem = 16px

rem布局原理：根据CSS媒体查询功能，更改根标签的字体尺寸，实现rem单位随屏幕尺寸的变化，如下代码所示

@media only screen and (max-width: 1600px and (min-width: 1280px{
    html{
        font-size: 14px;
    }
}
@media only screen and (max-width: 1280px and (min-width: 960px{
    html{
        font-size: 12px;
    }
}
@media only screen and (max-width: 960px{
    html{
        font-size: 10px;
    }
}

注意，一般使用rem方案解决移动端适配问题。IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。 

二、详解

通过设置根标签的字体尺寸，可以改变rem，从而形成一个可控的统一参考系。

第一种思路：设置rem的大小与屏幕宽度成正比

// 获取视图宽度
// document.documentElement是指html根节点
// document.body是指body节点
// 因为兼容问题, 有时拿不到根节点的宽度就会拿body来顶替
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth;
 
// 设置html标签的font-size为视图宽度的十分之一
let htmlDom = document.getElementsByTagName('html'[0];
console.log(htmlDom.style.fontSize;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
console.log(htmlDom.style.fontSize;
注意，使用rem+sass可以更好、更方便的适配各种分辨率的移动端。
第二种思路：设置rem尺寸与px容易换算
html{
    font-size: 62.5%; /* 62.5% * 16px = 10px */
}
注意，一般PC浏览器规定字体尺寸最小支持12px，手机端不存在这个问题。
            
声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！
            

                编程笔记
                »
                CSS—相对单位rem
            
            

                
                    赞同 (33)
                
                or
                
                    
                    分享 (0)