rem布局

先简单的一句话介绍一下rem
rem是相对于根元素html的字号(以px为单位)来计算宽高的。

rem布局开发Web App的不错选择。

具体举个例子

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;    
}

现在font-size20(即1rem 等于 20px),效果如下所示:

rem布局_第1张图片
20倍.png

现在我们把 font-size设置为 50(即 1rem 等于 50px),效果如下:
rem布局_第2张图片
50倍.png

在项目中为了方便使用,一般会把 htmlfont-size设置为 10或者是 100
font-size:10px时, 1rem等于10px2rem等于20px,以此类推。

也就是说:

html的font-size可以等比改变所有用了rem单位的元素

那不同分辨率下,怎么办呢?

首先假设上面的页面是按照640的标准尺寸编写的,那么看一个对比图:

rem布局_第3张图片
image.png

通过上边的图表可以看出,如果我们要把640的换成480的,480/640=0.75,那么在480宽度下,其 htmlfont-size也是 20px*0.75=15px,所以如果要适配480的,可将其 htmlfont-size也是 20px/0.75=26.67px
在项目中,可以通过JS去动态计算根元素的 font-size,这样的好处是所有设备分辨率都能兼容适配;也可以针对一些主流的屏幕设备去做media query设置’(不能兼容所有设备),如下所示(具体根据实际工作场景确定):

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

除了兼容不同分辨率的设备之外,项目开发中我们还需要考虑浏览器的兼容性:


rem布局_第4张图片
rem兼容.png

未完待续......

你可能感兴趣的:(rem布局)