viewport 和 Mediaquery 都是为了进行响应式Web设计，即面对不同的设备有不同的样式而又不用开发不同的页面。
viewport 视口，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,最常见用法 

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width : 当前viewport的宽度等于设备的宽度
initial-scale=1.0 : 初始缩放比例1.0
maximum-scale=1.0 : 最大缩放比例1.0
minimum-scale=1.0 : 最小缩放比例1.0
user-scalable=no : 不允许用户手动缩放

Media query 媒体查询，针对不同的媒体类型定义不同的样式。最常见用法，根据屏幕宽度设置不同样式。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Default wide-screen styles */
@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}
@media only screen and (max-width: 240px) {
    /* styles for smaller devices */
}