学习CSS3特性REM

最近项目中要做微信端网页开发，但是要做适屏，因为iphone4，5，6的屏幕有大有小，所以不同浏览器预览的效果也不一样，那怎样才能达到不同屏幕显示的效果也一样呢，这个时候我们就要用到CSS3的rem特性，首先让我们认识一下到底REM是干嘛用的？以及如何来使用？

简介：

REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

下面这段代码是我应用到项目中的CSS:

  @media only screen and (min-width: 320px){
  html {
      font-size: 10px !important;/*10 ÷ 16 × 100% = 62.5%*/
  }
}

@media only screen and (min-width: 370px){
    html {
        font-size:13px !important;
    }
}
@media only screen and (min-width: 410px){
    html {
        font-size: 16px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 23px !important;
    }
}

body{
  font-family: '黑体';
  background-color: #f8f8f8;
  letter-spacing: -1px;
}
ul{
  display:inline-block;
  margin:0;
  padding:0;
}
ul li{
  float:left;
  list-style: none;
}
a:visited{
  color:#0E0E0E;
}
.weui_search_bar{
  background-color: #fff;
}
.weui_search_outer{
  background-color: #fff;
}
.weui_search_outer:after{
  border: none;
}
.swiper-slide>img {
    width: 100%;
}
.navbar{

}
.navbar ul{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navbar ul li{
  width: 20%;
}
.navbar ul li a{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.navbar ul li:nth-child(6+n){
  margin-top: 10px;
}
.navbar ul li img{
      width: 3.9rem;
}
.navbar ul li a .type{
  font-size: 1.1rem;
  padding:3px 0;
}
/*wonderful-recommend*/
.common-content{
      padding: 0 10px;
      margin-top: 15px;
}
.common-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1.2rem;
  padding-bottom:10px;
  border-bottom: 1px solid #EFF0F0;
}

.common-header .left{
  display: flex;
  align-items: center;
}
.common-header .left img{
      width: 1.2rem;
}
.common-header .left .title{
  margin-left:5px;
  font-size: 1.2rem;
}
.common-header .right{
  display: inline-block;
}
.common-header .right .more{
  color:#FF4B00;
  font-size: 1rem;
}
.wonderful-recommend{
  margin-top: 20px;
}
.wonderful-recommend .list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .5rem;
}

.wonderful-recommend .list li{
      width: 33%;
      margin-top: 15px;
}
.wonderful-recommend .list li a{
  width: 100%;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}
.wonderful-recommend .list li a img{
      width: 90%;
}
.wonderful-recommend .list li a .name{
  font-size: 1rem;
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 5px 0;
}

.wonderful-recommend .list li a .bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wonderful-recommend .list li a .bottom img{
      width: .5rem;
}
.wonderful-recommend .list li a .bottom .view-count{
  color: #808080;
  font-size: 1rem;
  margin-left: 5px;
  letter-spacing: normal;
}

/*album-recommend*/
.album-recommend{
  margin-top: 20px;
}
.album-recommend .common-header{
  border: none;
}

.album-recommend .list{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1.2rem;
}

.album-recommend .list li{
  width: 47%;
  margin-bottom: 10px;
}

.album-recommend .list li a{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #E1E1E1;
  padding: 6px;
  border-radius: 2px;
}

.album-recommend .list li a img{
  width:100%;
}

.album-recommend .list li a .name{
  font-size: 1.1rem;
  letter-spacing: -1px;
}
/*support-commodity*/
.support-commodity{
  margin-top: 15px;
}
.support-commodity .common-header{
  border: none;
}

.support-commodity .list{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1.2rem;
}

.support-commodity .list li{
  width: 47.8%;
  margin-bottom: 10px;
}

.support-commodity .list li a{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #F0F0F0;
  padding: 7px;
  border-radius: 2px;
}

.support-commodity .list li a img{
  width:100%;
}

.support-commodity .list li a .name{
  font-size: 1rem;
  padding-top: 3px;
}

.support-commodity .list li a .price-content{
  font-size: 1rem;
  display: flex;
  color: #FF0000;
  align-items: center;
}

/*footer*/
footer{
    border-top: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 50%;
}
footer a:first-child{
  border-right: 1px solid #e0e0e0;
}
footer a img{
  width:1.4rem;
}
footer a .title{
  color:#499D11;
  font-size: 1.2rem;
  margin-left: 5px;
}

参考地址：

http://www.w3cplus.com/css3/define-font-size-with-css3-rem

http://isux.tencent.com/web-app-rem.html

http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html

2017

2016

简介：