html 屏幕常用宽度,网页常见的一些尺寸

屏幕尺寸

屏幕的总宽度和高度，他们是显示器的尺寸，而不是浏览器的尺寸。这些尺寸以设备像素为单位进行测量，平时很少用到

通过screen.width和 screen.height获取

窗口尺寸

浏览器窗口的内部尺寸，以CSS像素为单位(测量值包含滚动条)

通过window.innerWidth和window.innerHeight获取

滚动偏移

文档的水平和垂直滚动偏移量。因此，您可以找出用户滚动了多少。以CSS像素为单位

通过window.pageXOffset和window.pageYOffset获取

视口

字面理解，视口即可以看见的窗口大小。所以大多数情况下他和浏览器的窗口大小一致。

我们知道html页面最外层的元素是html，他在浏览器中显示，但其实在浏览器和html页面之间，还有一层，即：视口。

他在html元素的外层，包含html。

通过document.documentElement.clientWidth和document.documentElement.clientHeight //document.documentElement实际上是html元素获取

我们平时设置的html/body width:100%，实际上就是设置html，body等于视口的宽度。设置某个元素，如侧边栏width:20%，实际也是相对于视口设置的(如果他的上级元素是body：width：100%)，所以当浏览器窗口变化，他的宽度会跟随变化。

但视口不是HTML创建的，因此不能受CSS影响。当我们设置html为固定宽度width:200px，它的值还是浏览器窗口的宽度和高度。

视口和窗口的区别

窗口包含滚动条的大小，视口不包含，视口只是我们可以看见的大小

元素宽高

即页面实际的宽和高

通过document.documentElement.offsetWidth和document.documentElement.offsetHeight获取

事件坐标

发生鼠标点击事件时，常见的属性值

pageX/Y给出相对于 CSS像素中元素的坐标。(常用)

clientX/Y 以CSS像素给出相对于视口的坐标。(很少用)

screenX/Y 以设备像素为单位给出相对于屏幕的坐标。(基本不用)

媒体查询

@media all and (max-width: 400px)

此处的值一般指的浏览器大小，即视口的大小

详情可参考