##视口
视口（viewport）的作用是限制<html>元素，<html>元素是所有网页块元素中最高一级的元素。
一个实际的例子。 假设在一个流式布局中，你其中一个边栏的宽度是10%。现在当你改变浏览器宽度时，边栏会一致的缩放。
那么问题来了，他究竟是如何工作？ 原理上说，当你给sidebar一个10%的宽度，实际上它获得了父级宽度的10%。
让我们来考察一下（你并没有设定宽度的）body元素。
那么问题来了，body元素的宽度是多少？
通常，所有块级元素的宽度都会等于父元素（这里有些特例，但不要在意细节）。所以<body>元素与其父级<html>元素等宽 element。
那么<html>元素的宽度又如何？为何他与浏览器窗口等宽？由于与浏览器窗口等宽，这也就是为什么你设置边栏宽度为10%他就占据了整个浏览器宽度的10%
。这是一条所有的web开发人员感性上认可并使用的原理。 你不知道的只是在理论上，这条原理如何实现。 理论上，<html>元素的宽度被视口限制 。 而<html>元素占据了100%的视口宽度的。 视口宽度又正好等于浏览器宽度:就是这么定义的。 视口并非一个HTML结构，其不受CSS控制。 在桌面端，其与浏览器窗口长宽一致。但在移动端情况略微复杂。
body的宽度=html的宽度=视口宽度=浏览器宽度 设备的宽度
http://www.tuicool.com/articles/ZB32Ivi
http://weizhifeng.net/viewports2.html
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
