FlexLayouthttps://github.com/whhlulu/Re...响应式布局，先看效果大屏效果：>50rem中屏效果：>30rem,<=50rem小屏效果：<30rem下面是一些注意事项==================================================PARTI:Response传统网站的优势：1减少工作量1)网站、设计、代码、内容只有一份2)JS和CSS改动小2节省时间3多分辨率设备可以正确显示4搜索优化缺点：会加载更多样式和脚本资源设计更难准确定位和控制老浏览器的兼容性问题=========================================================PARTII：主流浏览器ChromeIE/Edge（Edge：>12）FirefoxQQ（微信采用QQ浏览器内核X5)Safari/iOSSafari360UCCheetah====================================================PARTIII:媒体查询1@mediaalland(min-width:800px)and(orientagion:landscape){...}逻辑运算查询操作符：notandonly,(,相当于or)css3媒体属性width:视口宽度height:视口高度device-width:渲染面的宽度，也就是设备屏幕的宽度device-height:渲染面的高度，也就是是设备屏幕的高度Portaspectratiodevice-aspect-ratio：渲染面的宽度，也就是设备屏幕的宽度color：每种颜色的位数，比如min-color：16位，8位分辨率：检测屏幕或打印机的分辨率，如：min-resolution：300dpi以上的属性可以加min-或max-前缀=====================================================媒体查询2width：视口宽度device-wdithviewportviewport对于PC，只有一个视口对于移动设备，一共有三个视口：布局视口，视觉视口，理想视口==================================================强制使用最新版IE文档模式
