响应式也是随着移动端的兴起产生出来的概念。其含义就是，你的网页，适应电脑端、又同时适应手机端和平板端。简明教程 就是一个响应式的站点，你只需要把当前页面的窗口放大，然后缩小，就能理解这一点。
对于viewport的深入理解，百度搜索可以描述得非常复杂，但你也可以简单粗暴的认为，加上这句，页面就能自动伸缩。
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">有时我们为了让页面自适应，在不同尺寸的屏幕下面，有不同的显示效果。实现这一点，就需要对不同的尺寸的屏幕进行不同的设置，这就是媒体查询。
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
* {font-size: 20px;}
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
* {font-size: 18px;}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
* {font-size: 16px;}
}分别对这三种尺寸的屏幕，字体的初始大小设置为20px、18px、16px。