CSS 对象模型视图

参考

事件

• Window 事件：
  • resize
• VisualViewport 事件：
  • resize
  • scroll
  • scrollend
• Document 事件
  • scroll
  • scrollend
• Element 事件
  • scroll
  • scrollend
• MediaQueryList 事件
  • change

术语

• 视口
• 布局视口
• 可视视口

接口

• MediaQueryList
• MediaQueryListEvent
• Screen
• CaretPosition
• VisualViewport

接口拓展

该模块为其他规范中定义的接口扩展了属性和方法。

• Window
  • devicePixelRatio
  • innerHeight
  • innerWidth
  • matchMedia()
  • moveBy()
  • moveTo()
  • outerHeight
  • outerWidth
  • pageXOffset（参阅 scrollX）
  • pageYOffset（参阅 scrollY）
  • resizeBy()
  • resizeTo()
  • screen
  • screenLeft
  • screenTop
  • screenX
  • screenY
  • visualViewport
  • scroll()
  • scrollBy()
  • scrollTo()
  • scrollX
  • scrollY
• Document
  • elementFromPoint()
  • caretPositionFromPoint()
  • scrollingElement
• Element
  • checkVisibility()
  • clientHeight
  • clientLeft
  • clientTop
  • clientWidth
  • currentCSSZoom
  • getBoundingClientRect()
  • getClientRects()
  • scroll()
  • scrollBy()
  • scrollHeight
  • scrollIntoView()
  • scrollLeft
  • scrollTo()
  • scrollTop
  • scrollWidth
• HTMLElement
  • offsetHeight
  • offsetLeft
  • offsetParent
  • offsetTop
  • offsetWidth
• HTMLImageElement
  • x
  • y
• Range
  • getBoundingClientRect()
  • getClientRects()
• MouseEvent
  • clientX
  • clientY
  • offsetX
  • offsetY
  • pageX
  • pageY
  • screenY
  • x
  • y

该模块为 Text、Element、CSSPseudoElement 和 Document 接口定义了几何工具方法。这些 GeometryUtils 特性目前尚未在任何浏览器中实现。

指南

坐标系

用于指定显示上下文中位置的坐标系系统，包括：显示器窗口坐标系、移动设备视口坐标系以及打印纸张位置坐标系。

视口概念

视口的概念解析：涵盖视口的本质定义，对 CSS、SVG 和移动设备的影响，以及可视视口与布局视口的关键区别。

相关概念

• zoom
• CSS 对象模型（CSSOM）
• CSS 像素
• 滚动容器
• <meta>

规范

参见

• CSS 对象模型（CSSOM）API
• CSS 溢出模块
• CSS 滚动边界模块
• CSS 滚动吸附模块