今天讲了响应式，感觉还是挺不错的。
响应式是针对不同分辨率应用不同的CSS样式；要实现响应式就要知道一下几点：
一：meta标签的设置；
网页宽度调整：<meta name="viewport" content="width=device-width;initial-scale=1.0" />该代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1.0），即网页初始大小占屏幕面积的100%。除了这两个属性外，还有很多其他属性，这里就不细说了。
二：不适用绝对宽度和字体；
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度，也不能使用具有绝对宽度的元素。
三：流式布局；
四：媒体查询；
@media only screen and (max-width: 600px) 当检测到screen的最大宽度是600px的时候,就将执行@media里面的css,其实就是相当于利用了层叠样式表的特性,@media里面的代码将原来的覆盖了；max-width就是当屏幕小于等于多少的时候执行(<=)，min-width就是当屏幕大于等于多少的时候执行(>=)；
响应式的具体思路即使这样的。
当然响应式最不容易理解的就是px,em,rem；em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px；所有未经调整的浏览器都符合（1em=16px）。em的一个参考点，一般都是以<body>的font-size为基准。em会继承父元素的字体大小，就很不方便，所以就有rem的出现了；rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
今天就是这些，主要记住em和rem的区别和运用。
原文：http://www.cnblogs.com/luolianlu/p/5031187.html