等比例适配所有屏幕---css3 rem用法

1，rem的定义

　　rem（font size of the root element）是指相对于根元素的字体大小的单位。rem是一个相对单位。和em非常相似。em（font size of the element）是指相对于父元素的字体大小的单位。两者之间的区别是一个计算的规则是依赖根元素一个是依赖父元素计算。

2，为什么要使用rem 

　　rem可以实现强大的屏幕适配布局。屏幕适配有很多种做法，例如：流式布局、限死宽度、还有就是通过响应式来做。但是，这些方案都有各种各样的弊端。使用流式布局在页面布局的时候大都是通过百分比来定义宽度，高度大都是用px来定义。流式布局最致命的缺点就是在大屏幕下的显示效果会变成页面元素被拉的很长，但是高度还是和原来一样，显得非常不协调。固定宽度是把页面设定一个固定的宽度，超出部分留白。但是固定宽度也有一个缺点就是在大屏幕下看起来页面会显得特别小。

3，rem的使用方法

　　rem是通过根元素进行适配的，网页中的根元素指的是html，我们通过设置html的字体大小就可以控制rem的大小。

          html {
        font-size: 40px;
      }
      .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;
      }    

　　width: 120px = 6rem * 20px（根元素设置），当我们把html的font-size设置为40px的时候，就会变为240px。改变html中的font-size就可以等比例的改变所有用了rem单位的元素。在任何分辨率下，页面的排版都是按照等比例进行切换，并且布局没有乱。

　　我们可以通过js去动态改变根元素的font-size去调整，也可以利用media query（媒体查询）改变根元素的font-size实现适配

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

 

转载于:https://www.cnblogs.com/tianhaining/p/8137329.html