rem用法介绍
首先,什么是rem,相信em大家都听过并经常用,em是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。rem也是一个相对单位长度,但是rem是相对于根元素(即html元素)的字体大小的单位,而em是相对于当前的父级元素的字体大小的单位。rem可以实现自适应。
接下来我们了解一下rem的用法吧。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 html{ 7 font-size: 20px; 8 } 9 10 #div1{ 11 width: 6rem; 12 height: 5rem; 13 background-color:red; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="div1"></div> 19 </body> 20 </html>
div1的长和高分别为120*100,我们设置的html元素的字体大小为20px,可见在这里1rem=20px;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 html{ 7 font-size: 40px; 8 } 9 10 #div1{ 11 width: 6rem; 12 height: 5rem; 13 background-color:red;
14 } 15 </style> 16 </head> 17 <body> 18 <div id="div1"></div> 19 </body> 20 </html
div1的长和高分别为240*200,我们设置的html元素的字体大小为20px,可见在这里1rem=40px;
在上面两个例子中我们发现第一个案例div是等比例放大到第二个div,html的font-size的改变就会导致div的大小发生改变,我们并不需要改变先前给div设置的宽度和高度。利用这个特性,我们可以很好地根据屏幕分辨率把网页进行缩放。
那么怎么计算出不同分辨率下font-size的值?
上面这张图是按照640的标准尺寸的,当屏幕宽度为640时,html font-size为20px;当屏幕为480时,480/640=0.75;0.75*20=15px;其他宽度时也类似地计算。
在开发中我们需要获得屏幕的分辨率这样才能根据不同的分辨率,设置相应地html font-size。我们通过JS去动态计算根元素的font-size,或者可以针对那些设备去做media query设置也可以实现适配。