rem
概念：指相对于根元素(html)的字体大小的单位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{font-size:10px;}div{font-size:3rem; /* 3rem = html的font-size * 3 = 30px */}</style></head><body><div>123</div></body></html>
rem响应式的原理：
根据屏幕不同的尺寸，调整根元素的font-size，实现响应式的效果。
rem与em的区别
rem是相对于根字体的size来设置的,而em是相对于父级元素字体的size来设置的。
因为父组字体还有一些继承关系等，因此,em的计算相对复杂，不推荐
rem响应式实现方式：
使用媒体查询+ rem ,或者使用js+rem,在不同宽度的视口下自动调整元素大小
rem示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*** 动态设置根字体大小*/var c=()=>{let w=document.documentElement.clientWidth; /* 获取设备的宽度 *///设置一个默认值，以320的宽度(iphone)来计算20号字体let defaultWidth = 20*(w/320)//设置字号let n= defaultWidth > 40 ? 40 + 'px' : defaultWidth + 'px';//设置根字体大小document.documentElement.style.fontSize = n;}window.addEventListener("load",c);window.addEventListener("resize",c);</script><style>div{font-size:1rem;}</style></head><body><div>123</div></body></html>
可以通过F12，改变页面尺寸，来查看根字体随尽寸大小而变化：
