屏幕尺寸
屏幕的總寬度和高度，他們是顯示器的尺寸，而不是瀏覽器的尺寸。這些尺寸以設(shè)備像素為單位進(jìn)行測量，平時很少用到
通過screen.width和 screen.height獲取
窗口尺寸
瀏覽器窗口的內(nèi)部尺寸，以CSS像素為單位（測量值包含滾動條）
通過window.innerWidth和window.innerHeight獲取
滾動偏移
文檔的水平和垂直滾動偏移量。因此，您可以找出用戶滾動了多少。以CSS像素為單位
通過window.pageXOffset和window.pageYOffset獲取
視口
字面理解，視口即可以看見的窗口大小。所以大多數(shù)情況下他和瀏覽器的窗口大小一致。
我們知道html頁面最外層的元素是html，他在瀏覽器中顯示，但其實(shí)在瀏覽器和html頁面之間，還有一層，即：視口。
他在html元素的外層，包含html。
通過document.documentElement.clientWidth和document.documentElement.clientHeight //document.documentElement實(shí)際上是html元素獲取
我們平時設(shè)置的html/body width:100%，實(shí)際上就是設(shè)置html，body等于視口的寬度。設(shè)置某個元素，如側(cè)邊欄width:20%，實(shí)際也是相對于視口設(shè)置的（如果他的上級元素是body：width：100%），所以當(dāng)瀏覽器窗口變化，他的寬度會跟隨變化。
但視口不是HTML創(chuàng)建的，因此不能受CSS影響。當(dāng)我們設(shè)置html為固定寬度width:200px，它的值還是瀏覽器窗口的寬度和高度。
視口和窗口的區(qū)別
窗口包含滾動條的大小，視口不包含，視口只是我們可以看見的大小
<html>元素寬高
即頁面實(shí)際的寬和高
通過document.documentElement.offsetWidth和document.documentElement.offsetHeight獲取
事件坐標(biāo)
發(fā)生鼠標(biāo)點(diǎn)擊事件時，常見的屬性值
pageX/Y給出相對于<html> CSS像素中元素的坐標(biāo)。（常用）
clientX/Y 以CSS像素給出相對于視口的坐標(biāo)。（很少用）
screenX/Y 以設(shè)備像素為單位給出相對于屏幕的坐標(biāo)。（基本不用）
媒體查詢
@media all and (max-width: 400px)
此處的值一般指的瀏覽器大小，即視口的大小
