移动端适配解决方案

移动端适配解决方案

1. 通过媒体查询和css的media queries
2. flex弹性布局
3. 百分比加媒体查询。
4. rem方式：@
   flex布局的关键：文字流式，控件弹性，图片等比缩放。在某些比较小的屏幕可以做响应调整。iphone 4去调整padding，左右布局变为上下布局。

rem:相对于根元素(html)的字体大小，1rem = html标签的font-size,通过媒体查询的方式动态改变html，font-size的大小。

@media screen and (min-width:750px){
  html{
    font-size:50px;
  }
}

.adapter(@width) {
  @media screen and (min-width:@width) {
     html {
         font-size: round(@width/15,2)
     }
  }
}

.adapter(320px);