响应式布局和媒体查询

一套页面能够适配所有浏览器
网页能够在任何大小的屏幕上完美布局！
这个网页能够动态监测到当前屏幕的宽度，根据不同的宽度来设置不同的样式，达到适配的效果；

监测当前屏幕宽度:
1.用js获取当前屏幕的宽度
2.媒体查询技术 css3新增
媒体查询基本语法：
@media screen and (min-width:992px) and (max-width:1200px) {
      div{
        background：red;
      }
 } 
当屏幕的宽度在992-1200px之间，div的样式才生效

设备分类

大屏设备：>1200px             主流pc     版心1170px
中屏设备：992px-1200px    老式pc     版心970px
小屏设备：768px-992px　　pad         版心750px
超小屏设备：<768px            手机         版心100%
使用媒体查询做响应式布局非常麻烦，为了让盒子为了适配不同的屏幕，写要写4组样式，如果有100个盒子，代码量会很大，因此一般借助一些响应式框架，如bootstrap