响应式布局基础二：设置viewport

在开发PC端的网站的时候，我们通常需要根据屏幕分辨率的大小，通过css的媒体查询，设置响应的像素大小。

在开发手机网站的时候，通常也需要这样设置的。但是在手机端，还需要多设置viewport这个元素。

viewport元素通常是用来设置页面的大小和缩放比例的。

手机浏览器为了更好地展示这些没有没有为手机设计的网站，通常会使用桌面的宽度来渲染（通常是960px，980px），然后再改变字体的大小和对内容的缩放来使内容适应屏幕。用户通常访问这些网站，需要自己去缩放网站。（这对用户体验真糟糕！）

<meta name="viewport" content="width=device-width, initial-scale=1">

通过上面的语句，便能设置网站的宽度为设备的宽度（不再是手机浏览器自己设置的960px了），然后又让网站的缩放比例为不缩放。（通常还设置user-scalable为no，禁止用户自己缩放比例）。

效果图：

上图中，第一次访问网站，由于没有设置viewport，用户需要自己缩放网页，才能看清内容（用户体验，差！）

第二次访问的网页，由于有设置viewport，用户直接就可以查看网页内容，用户体验比第一个好多了！（赞！）

参考资料：https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en