CSS布局基础之二认识Viewport

什么是viewport

viewport，等同于浏览器窗口。

功能：约束你网站中最顶级包含块(containing block)元素html标签。

什么是包含块(containing block)？下篇再说。

默认下，块级元素(display:block)使用父元素宽度的100%。

所以body元素和html元素一样宽，而html元素宽度就是浏览器窗口宽度。

所以你常常会遇到如下场景:

移动浏览器的viewport

viewport分为visual viewport,layout viewport,ideal viewport。

普通pc屏幕的visual viewport等于layout viewport等于ideal viewport。

移动浏览器如下，

visual viewport的样子:



layout viewport的样子:



ideal viewport的样子:





厂商自己定义了设备独立像素dips，也自定义了ideal viewport。

就把dips看做ideal viewport吧。

都是为了不同分辨率但尺寸一样的屏幕，显示同一张图片的大小要一致。

获取viewport

1.获取ideal viewpot

window.innerWidth/window.innerHeight

--移动端:

给页面设置一个如下显示的meta标签

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

然后使用document.documentElement.clientWidth来获取。

--桌面端:

document.documentElement.clientWidth用来获取浏览器窗口宽高，不包含滚动条。

2.获取layout viewport

--移动端:

<meta name="viewport" content="width=400" />

layout viewport已经被设置成400px啦。

--桌面端:

window.innerWidhth可以拿到浏览器窗口宽高，包含滚动条。

3.获取html元素宽高

document.documentElement.offsetWidth/document.documentElement.offsetHeight

（以上单位都是css像素）

常见案例

1.设置min-width适应整个屏幕

2.基于rem的自适应布局

参考引用:

http://www.cnblogs.com/2050/p/3877280.html

http://blog.jobbole.com/44319/

http://blog.jobbole.com/44903/

https://segmentfault.com/a/1190000004403527