PC端的视口 · 前端

## PC端在PC设备上viewport的大小取决于浏览器窗口的大小,所以我们很少在PC开发中考虑视口,以CSS像素作为度量单位. 通过以往的CSS只是,我们都能理解<html>的大小是会影响到我们网页布局的,而viewport又决定了<html>的大小, 所以viewport间接的决定并影响了我们网页的布局. ## 获取PC端视口大小以下数值会随着视口的大小而改变. ``` console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); ``` ## 注意 1.如果确定具体的宽高值,当超出viewport 的大小的时候,会出现滚动条. 2.如果设置的宽度为100%,当子元素宽度大于父容器的时候,会自动换行. 3.如果不想出现滚动条,或者换行,可以将子元素的宽度设置为百分比,但是可能内容会溢出.