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视口标签,如:
<meta name="viewport" content=" width=device-width 宽度为理想视口宽度,
initial-scale=1, 初始缩放比
minimum-scale=1, 最小缩放比
maximum-scale=1, 最大缩放比
user-scalable=no 用户是否可以缩放 yes或no
">
这行代码是通知浏览器,布局视口的宽度应该与理想视口宽度一致。这也说明了定义理想视口是浏览器的工作,而不是设备或操作系统的工作。因此,同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备
总结:
1、在桌面浏览器上,浏览器窗口与视口的宽度一致,而视口(CSS标准文档中称为“初始包含块”)是CSS百分比宽度推算的根源,因此,浏览器窗口是约束CSS布局的视口;
2、在手机上,有两个视口,布局视口会限制CSS布局;视觉视口决定用户看到的网站内容;
3、移动端浏览器还有个理想视口,它是对特定设备上的特定浏览器的布局视口的一个理想尺寸;
4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。