前言：第一次写博客，还请各位前辈批评，指点，丢石头给我，感谢前辈和同行的指点！
涉世尚浅，才开始工作第三天，就接到了一个PC端直播间项目，还要求响应式的啊！对于当时的我，近一年多没碰过前端代码了(小生我转行的 iOS混不下去了)，这有什么办法。第一次做响应式，只记得学校学过一个百分比布局，其他没了，什么内容自适应、字体大小、代码冗余、后期维护这些都没考虑。反正是先做出来了再说，最后做出来，无颜面对江东父老了，后期自己一边修改一边骂，SB啊 当时..SB啊 当时.
不废话了，说说我做完直播间的收获，分享下
1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。
①我们来看看媒体查询 页面最大宽度的标准写法
1 @media screen and (max- 960px){ 2 body{ 3 background: #000000; 4 font-size:14px; 5 ... 6 } 7 }
解读下代码意思：当页面宽度小于960px时，使用以下对应样式表.
备注：screen 意思是告知设备在打印页面时使用无衬线体，屏幕上显示也用无衬线字体，现在你会去打印一张网页吗？不会吧！所以目前网站都不会考虑用户去打印网站页面，so...screen可以不用写，直接省去.
②这是媒体查询 页面最小宽度的标准写法
1 @media screen and (min-960px){ 2 body{ 3 background:#000000; 4 font-size:14px; 5 ... 6 } 7 }
代码意思：当页面宽度大于960px时，使用以下对应样式表.
③当然我们也可以媒体查询一个页面区间宽度，
1 @media screen and (min-960px) and (max-1200px){ 2 body{ 3 background:#000000; 4 font-size:14px; 5 ... 6 } 7 }
上面代码大概意思是：当页面宽度大于960px，小于1200px时([960px,1200px])，使用以下样式表.
④ 媒体查询的其他参数
以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于，除此之外她还有其他特性，下面是我查找总结媒体查询的其他参数和用法.
width/height：浏览器可视宽度(也叫视口)/浏览器可见高度.
device-width/device-height：设备屏幕宽度/设备屏幕高度.
color:检测颜色的位数。（例如：min-color:32 就是检测设备是否拥有32位颜色 #000000）
color-index:检查设备索引颜色表中的颜色(颜色值不能小于0)。
orientation：判断当前设备是横屏还是竖屏.
aspect-ratio:检测浏览器可视宽度和高度的比例。(现在宽高比为16:9是最佳的，比如我做的直播窗口，要求宽高比就是16:9)
device-aspect-ratio:检测设备的宽度和高度的比例。
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格设备的还是位图设备。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个很少用得到）
2）媒体查询的"局限性"
我要说的这个局限性，指的是它不能用在IE8以下，IE8以下就不说了，它目前应该被前端骂的是 身残志坚了，IE8以下了 既不支持HTML5，也不支持CSS3的媒体查询，这个怎么搞...IE8以下放弃算求，但是有些公司，用户又不多啊，非得要求你小前端要响应式IE8以下，还好可以在项目中导入Respond.js，这样使用CSS3的媒体查询就有作用了，对于这个Respond.js，小生没实打实的用过，在这里闲扯了下，分享一篇知乎上关于这个Respond.js用法的文章给大家：https://www.zhihu.com/question/21634225
3）实现响应式网页，不止CSS3的媒体查询能做
1. Bootstrap：
对于这些框架，我感觉都怕用，因为它里面所有标签的样式都有，你引用就好了，是节省了开发时间。对于我来说，有点难把握，做完移动端网站我就有点后悔用了它，要说，不管什么，会写源生的才是最Nice的.
2. JS监听视口宽度变化从而动态更换CSS样式表，达到最佳的响应式：
这种方式，应该是很多攻城狮都喜欢用的，因为它精确，对于代码冗余，后期维护这些都比较友好，你要知道，攻城狮一般都很强调用户体验的.
等等...