原文3年多前发表在私人站点，现迁移到简书
3种viewport
以前PC端的网站一般宽度在1000px以上,这种大尺寸的页面如何在手机上展示?答案就是：缩放，所以早期看到的网站都很小，需要双击放大某一部分区域才能浏览。
visual viewport
visuall viewport,显示的屏幕窗口,可以把他理解为放大镜,距离可以拉近一点拉远一点,显示的内容可以缩小可以放大,大致就是下面这个样子：
viewport
比如一个1024px宽的页面，要在320px的手机上显示，可以拉远距离(缩放)全局浏览，也可以拉近只看一部分,并且移动visual viewport来查看网页的不同部分
layout viewport
PC的网页怎么在320px的手机上渲染？这里有个隐藏的概念,就是layout viewport。当我们设置一个width=20%时,他必须知道父级的width是多少,最终必须找到一个设置绝对值的顶层的元素(body)
早期没有专门为移动端做的页面,所以手机浏览器默认的layout viewport都是接近pc的宽度，这样可以确保PC的网页展示都没问题。这里里有每个手机浏览器的默认layot viewport，附个图：
layout
修改layout viewport
layout viewport+visual viewport，PC端网页已经可以在手机上展示了，不过显然还不够完美：能不能不要缩放，不要双击放大以后再拖动来看网页? 假设手机宽度是320px，那就做个宽度只有320px的页面：
<html>
<body style="width:320px">
<div class="contianer">
hello everyone
</div>
</body>
</html>
pc viewport
可以看到因为默认的layout viewport是按PC设置的，就算设置一个320px，也会按照PC的效果来展示
ios最早提供了修改layout viewport的能力，我们给上面的页面设置下layout viewport，并且visual viewport不缩放，这样就完美了：
<meta name="viewport" content="width=320px, initial-scale=1.0">
pc viewport
ideal viewport
因为移动端的设备太多,宽度不一,所以上面写死的width=320px是非常不好的。还好设备都有一个ideal viewport，也就是最佳的尺寸，把layout viewport设置成idela viewport，并且visual viewport不要缩放就能达到最好的效果（可能有点绕）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width和initial-scale 设置其他值的效果，可以在这里查看：understanding-viewport
小结
设置layout viewport为设备宽度，并且visual viewport不缩放，这样就能实现最好的效果，为我们的响应式设计提供了基础
media query
为不同的设备设置了网页的布局总宽度之后，需要进行区分，以便为不同的宽度设置不同的布局，mediaquery提供了这种能力，它有非常多的属性，不过我们最常用的就是width
@media (max-width: 480px) {
// 隐藏某些元素
}
@media (max-width: 768px) { }
@media (min-width: 1200px) {
// 显示某些元素
}
恰当的断点很重要，根据2014 css报告,设置最多的是480，768，990，1200，当然可能和bootstrap用的最多有关
device width和width
另外可以再看看device width和width这两个值，大部分时候他们实现的效果是一样的，但是还是有一些细小的差别:
- device-wdith 指的是设备的宽度，在pc上你改变拖动浏览器窗口的大小并不会改变这个值
- width:指的是浏览器的宽度
所以使用width会更好，并且在某些android设备上，使用device-width可能会变成device pixel
总结
设置不同的布局宽度、不同宽度设置不同的样式是实现响应式站点的基础。实际使用中，还是有很多细节，比如文字、表格布局、retina 下的图片处理等，以后有机会继续
网友评论