响应式布局
响应式布局可以使我们的同一套页面适应不同的设备环境。
1.视口（viewport）
视口就是浏览器用于呈现页面的区域。
pc端的视口和移动前端的视口的概念是不一样。
pc端的视口和屏幕分辨率是一样的。
而移动端的视口和分辨率是没有关系的，通常都由厂家设置为980px。 为什么要把移动前端的视口设置为980px？那是因为在乔布斯那个年代，想在手机上观看网站出现一个问题，那就是如何用小屏幕设备访问大屏幕页面，同时可读性还好。乔帮主就想着为手机固定一个视口宽度，让手机的视口宽度等于世界上绝大多数PC网页的版心宽度，就是980px。这样，用手机访问电脑版网页的时候，旁边刚好没有留白。不过页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。
2.约束视口
为了解决前面的问题，可以在网页的中添加下面这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
width=device-width 视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
initial-scale=1.0 初始化的视口大小是1.0倍
maximum-scale=1.0 最大的倍数是1.0倍
user-scalable=0 不允许缩放视口
这个视口的标签告诉浏览器怎么渲染网页。在这里，标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。
此时如果用document.documentElement.clientWidth来测试浏览器屏幕宽度，你会发现当前视口宽度等于手机屏幕的宽度，约数后的视口宽度都是在320~480之间（手机竖直使用的时候）。
这个视口的尺寸，是手机厂商设置的，能够保证我们的文字比如16px，在自己的这个视口下清晰、大小刚刚合适。所以大屏幕的手机的约束视口 > 小屏幕手机的约束视口。这就能够保证我们的网页可以用px写字号、写行高。
需要注意的是：约束之后的视口宽度，不是自己的分辨率！！每个手机的分辨率，都要比自己的视口宽度大得多得多！