CSS Feature Support Checker

Responsive & Viewport

Modern units and techniques for responsive design across all screen sizes.

• ⏳ Viewport Units (vh, vw)

  Classic viewport units for responsive layouts.

  height: 100vhMDN
• ⏳ Dynamic Viewport Units (dvh, dvw)

  Dynamic units that account for mobile browser chrome visibility.

  height: 100dvhMDN
• ⏳ Small Viewport Units (svh, svw)

  Viewport units using smallest possible viewport size.

  height: 100svhMDN
• ⏳ Large Viewport Units (lvh, lvw)

  Viewport units using largest possible viewport size.

  height: 100lvhMDN
• ⏳ Dynamic Inline/Block Units (dvi, dvb)

  Dynamic viewport units for inline and block dimensions.

  width: 100dviMDN
• ⏳ Viewport Min/Max (dvmin, dvmax)

  Dynamic viewport minimum and maximum dimension units.

  width: 50dvminMDN
• ⏳ Container Query Width (cqw)

  Container query unit relative to container width.

  width: 50cqwMDN
• ⏳ Container Query Height (cqh)

  Container query unit relative to container height.

  height: 50cqhMDN
• ⏳ Container Inline/Block (cqi, cqb)

  Container query units for inline and block dimensions.

  width: 50cqiMDN
• ⏳ Container Min/Max (cqmin, cqmax)

  Container query minimum and maximum dimension units.

  width: 50cqminMDN
• ⏳ Safe Area Insets (env())

  Use env(safe-area-inset-*) to account for notches and system UI on devices.

  padding: env(safe-area-inset-top)MDN