一、概述
rem是一个相对长度单位，它的单位长度取决于根标签html的字体尺寸。rem即root em的意思，中文翻译为根em。浏览器的文本尺寸一般默认为16px，即默认情况下：
1rem = 16pxrem布局原理：根据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有两种思路。其一设置rem所代表的尺寸大小与屏幕宽度成正比。其二设置rem所代表的尺寸大小与px容易换算，方便按照设计稿写CSS，此时可以使用媒体查询动态修改根标签的字体尺寸来适配。
第一种思路：设置rem的大小与屏幕宽度成正比
通过JS动态设置根标签的字体尺寸，从而改变rem的尺寸。为了方便计算，一般将rem设置为视图宽度的十分之一。rem可以等比例适配所有分辨率终端（PC端和各种移动端）
// 获取视图宽度
// 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容易换算
浏览器的文本尺寸一般默认为16px，设置如下所示。使用媒体查询动态修改根标签的字体尺寸来适配不同分辨率的终端。文章来源：https://www.toymoban.com/news/detail-418251.html
html{
font-size: 62.5%; /* 62.5% * 16px = 10px */
}注意，一般PC浏览器规定字体尺寸最小支持12px，手机端不存在这个问题。文章来源地址https://www.toymoban.com/news/detail-418251.html
到了这里，关于CSS—相对单位rem的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
