转载：http://www.cnblogs.com/wmmang-blog/p/4708351.html

本文记录学到的有关视口的内容，不足之处请指正。

1、视口

有时会使用百分比来声明宽度,如：

html,body{}

div{width:30%;}

假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度，因此body占用了父包含块html元素宽度的100%。同样的，html也没显示声明宽度，因此html也占父包含块的100%。等等.. html的父包含块是什么呢？是视口。

在CSS标准文档中称为初始包含块. 这个初始包含块是所有CSS百分比宽度推算的根源。

在桌面上，视口的宽度与浏览器窗口的宽度一致。除开margin和padding，html和body元素都与浏览器窗口的宽度一致。这就是为啥以上div占用了浏览器宽度的30%。

2、布局视口

桌面上，视口与浏览器窗口的宽度一致，但在手机上，视口与移动端浏览器屏幕宽度是不关联的。试想下，在小屏幕的移动端设备下，如果使视口与移动端浏览器屏幕宽度一致，那么占body的30%的div在手机上展示的宽度看起来非常非常小，因此移动端浏览器厂商必须保证即使在窄屏幕下元素显示的很好，因此需要将视口的宽度设计得比屏幕宽度宽出很多，这样网站会显示得可以想象成如桌面上的那样。但是，如果网站没有为移动端做优化，那么浏览器会尽可能的缩小网站让用户能看到网站的全貌。

总结：在手机上，视口与屏幕宽度并无关联，这跟桌面上是相反的。我们称该视口为布局视口。

3、视觉视口

它是用户正在看到的网站的区域，注意是网站的区域（重要的事情说三遍）。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。

4、理想视口

默认情况下，一个手机或平板浏览器的布局宽度为768-1024像素。这对于手机的窄屏来说并不理想。换句话说，布局视口 的默认宽度并不是一个理想的宽度。因此理想视口被引进了。

只有当网站是为手机准备的时候才应该使用理想视口。当要添加理想视口，需要在页面里添加meta视口标签，如：

这行代码是通知浏览器，布局视口的宽度应该与理想视口宽度一致。这也说明了定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。

总结：

1、在桌面浏览器上，浏览器窗口与视口的宽度一致，而视口（CSS标准文档中称为“初始包含块”）是CSS百分比宽度推算的根源，因此，浏览器窗口是约束CSS布局的视口；

2、在手机上，有两个视口，布局视口会限制CSS布局；视觉视口决定用户看到的网站内容；

3、移动端浏览器还有个理想视口，它是对特定设备上的特定浏览器的布局视口的一个理想尺寸；

4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。