rem的优点就是可以通过修改html里的文字大小来改变页面中元素的大小,可以整体进行控制。
rem是相对于html根标签来说的,1rem = 1个根字号的大小。
第一种:通过媒体查询书写:
视口不同,书写不同的媒体查询:
// html根字号是视口宽的10/1
@media (width:375px) {
html {
font-size:37.5px;
}
}
@media (width:441px) {
html {
font-size:44.1px;
}
}
但因为有很多的视口,不可能通过@media书写很多的差异化css样式,因此第二种方法就是引入flexible.js文件(自己下载一份)。
实际工作中,rem的大小都是计算出来的,不是随便写上去的,那么如何得知rem的大小呢?
rem * html根字号的大小 = 元素px值
比如元素是69px html根字号是37.5
那么rem = 元素px数值 / html根字号大小