关于响应式布局

  对于响应式布局,别人总是会想到BootStrap这个响应式框架,.

   1.栅格布局
    <div class="row">
           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
           <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     </div>
2.媒体查询@media
          A: 一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
      <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
         B:即是直接写在<style>标签里：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*
  .class {
                background: #ccc;
  }
          
      /*小屏幕(桌面显示器大于等768px) 其实本身没有小于768的,因为bootstrap是以移动优先的*/
@media(min-width:768px){
  html{font-size:150%}
  .aa{width:6rem;height:6rem;border:1px solid yellow;float:left}
}
/*中等屏幕(桌面显示器大于等于992px) */
@media(min-width:992px){
  html{font-size:200.5%}
  .aa{width:6rem;height:6rem;border:1px solid pink;float:left}
}
/*中等屏幕(大桌面显示器大于等于1200px) */
@media(min-width:1200px){
   html{font-size:250%}
   .aa{width:6rem;height:6rem;border:1px solid gray;float:left}
}