1.做响应式 布局 ，首先不着急排版，先放头信息，设置视口什么的：
一般都是这玩意：
“viewport”，翻译为中文可以叫做“视区”，
- <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
一般都是这个，就是视口，宽高都是按设备屏幕，然后缩放和最小缩放都是1.0比例嘛，然后不允许用户强制缩放即可。
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。值为：1.0 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放
2.媒体查询
针对不同屏幕可以用不同显示效果：
这个不多说，百度一下媒体查询公式即可，，，，
3.针对不同屏幕的标准(为节省带宽) 我们呢就按照bootstarp的标准来：
【这有个bug 媒体查询是 带= 的，即如果是min-width:768 那么就是<=768的时候，即包含768咧...】
超小屏幕（手机，小于 768px） @media (max-width:767px){……}
小屏幕（平板，大于等于 768px） @media (min-width:768px){……}
中等屏幕（桌面显示器，大于等于 992px） @media (min-width:992px){……}
大屏幕（大桌面显示器，大于等于 1200px） @media (min-width:1200px){……}
4.写的方法一般就是从小尺寸往大尺寸写。
5.媒体查询公式中的 “ 类型 ”
media type 媒体类型
1.screen 屏幕的设备，比如电脑、平板、手机
2.TV 电视媒体
3.print 打印机
4.projection 投影仪
5.如果不设置就是all 会应用在所有的媒体设备中
@media only screen and (min-width:992px){……}
@media all and (min-width:992px){……}