响应式设计——viewport

1什么事viewport？

viewport 是用户网页的可视区域.即用户通过屏幕看到的部分.PC端通常就是用户的浏览器窗口大小，当用户通过拖拉的方式改变浏览器窗口的大小的时候viewport也是做相应改变的。移动端的viewport比较特殊，一般移动端会有一个默认viewport大小和缩放比例。当我们的网页需要在移动端做正常显示时，需要修改viewport的相应配置。

2修改viewport

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

将上面的标签添加到head标签中就可以修改默认的viewport以适应移动端。

content

标签中的content是设置viewport的相应参数，具体如下：

• initial-scale:设置viewport的初始缩放级别，这里设置为1.
• width:设置viewport未指定宽度，不随设备更改而改变.如width=300.当width的值设置为device-width时宽度随设备自适应.
• heigth:和width对应指高度.
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

所以当你想实现一个自适应网站时，不要多想第一步手动设置viewport