对于App来说,需要适应各种移动端的分辨率。为了解决这一问题,我也是各种买书,查博客得到一种适配性比较好的方法。就是rem。
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
不仅是App能使用rem,PC端网页也能使用rem,只不过rem在App下出于兼容性的考虑作用更加的大。
rem能等比例适配所有分辨率。
rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子:
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
假设就使用浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:
如果你要设置一个不同的值,那么需要在根元素<html>中定义,为了方便计算,时常将在<html>元素中设置font-size值为62.5%,相当于在<html>中设置font-size为10px;
rem在众多浏览器中都已得到很好的支持,如果您的项目不用考虑IE低版本的话,你就可以放心的使用了,如果您的项目在IE低版本中还占有不少的比例,那么你还在担心使用rem不能兼容,而不敢使用。其实是没有必要的,可以针对低版本的IE浏览器做一定的处理:
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }
h1 { font-size: 24px; font-size: 2.4rem; }