REM——适合移动开发的自适应方案
1.什么是REM
先来认识几个常见单位:
- px:像素,这个大家都知道。
- vh:viewport height,视窗高度,是指占整个浏览视窗高度的百分数。
- vw:viewport width,视窗宽度,是指占整个浏览视窗宽度的百分数。
- em:一个大写字母M的宽度(有时候也说一个汉字的宽度,但其实是错的),多少em是指大写字母M的宽度的倍数
而rem(Root em) ,理解过来是指根元素(<html>
标签)中的font-size
,虽然rem中有em但是这里两个单位没有任何关系,这里需要特别注意。
举个例子,chrome默认字体大小为16px,如果不设置html{font-size:XXpx}
,所以在这时1rem就是16px,
2.REM和EM的区别
首先两者什么关系都没有!
em是指自身的font-size
的倍数,这里举个例子
html {
font-size:16px;
}
p {
font-size:12px;
height:2em; /*2 x 12 = 24px*/
width:2rem; /*2 x 16 = 32px*/
}
3.手机端方案的特点
由于分辨率不统一,不同品牌不同设备的屏幕显示比例不同,移动端开发需要做适配的话只能使用等比例放大缩小来进行(这里不考虑响应式,只是在接近的分辨率中进行比较)。
4.使用JS动态调整REM
如果想通过缩放来显示内容,就必须与显示的宽度(innerWidth
)有关系。但是像上面的说的,这几个单位除了vw
之外都和显示宽度没有关系。然而,vd
目前浏览器兼容性很差,别说手机,就是电脑浏览器都有些不兼容。因此,就有人想出使用JS来获取显示宽度进行设 置。只需要在html页面中,加载css文件之前添加以下代码
<script>
document.write(`<style>html{font-size:${document.innerWidth}px;}</style>);
</script>
在此之后可以利用1rem=innerWidth来进行布局,这个时候1rem=100vd。如果觉得小数太小了写着不方便也可以取font-size=={doucment.innerWidth/10}
,注意,这里不要用100的,因为有的浏览器会设置最小字体,比如chrome浏览器默认最小为12px,当设置小于这个值的时候会不生效
5.REM与其他单位同时存在
当使用rem的时候不影响其他的单位使用,有时候考虑到以rem为单位的换算成px可能不到一像素,这个时候还是使用px为单位。