Web Dimensions Reference

Common widths, viewport heights and breakpoints for web design.

Back to all tools on ToolForge

More in Developer Tools

Common Breakpoints (Width)

Width (px)NameUsage
320xsSmall phones
375smiPhone SE, small phones
390—iPhone 14/15
414—iPhone Plus
768mdTablets, iPad portrait
1024lgiPad landscape, small laptops
1280xlLaptops
1440—Common desktop
19202xlFull HD
2560—QHD / 2K
3840—4K UHD

Viewport Heights (vh)

HeightDescription
100vhFull viewport height
100dvhDynamic viewport (mobile address bar)
100svhSmall viewport (min visible)
100lvhLarge viewport (max visible)
50vhHalf viewport
min-height: 100vhAt least full screen

Common Content Widths

WidthUsage
640pxNarrow content (prose)
768pxMedium content
960pxWide content
1024pxContainer max-width
1200pxLarge container
max-width: 65chReadable line length

About Web Dimensions Reference

This reference lists common web dimensions including responsive breakpoints, viewport height units and content widths.

CSS Media Query Breakpoints

/* Mobile-first breakpoints */
@media (min-width: 640px) { /* sm - Small devices */ }
@media (min-width: 768px) { /* md - Tablets */ }
@media (min-width: 1024px) { /* lg - Desktops */ }
@media (min-width: 1280px) { /* xl - Large screens */ }
@media (min-width: 1536px) { /* 2xl - Extra large */ }

/* Container queries (modern alternative) */
@container (min-width: 400px) {
  .card { grid-template-columns: 1fr 1fr; }
}

Common Device Widths

Device Width (px) Breakpoint
iPhone SE / Small phones 320 - 375 xs, sm
iPhone 14/15 390 —
iPad (portrait) 768 md
iPad (landscape) 1024 lg
Laptops 1280 - 1440 xl
Desktop / 4K 1920 - 3840 2xl

Viewport Height Units

Unit Description Use Case
vh Standard viewport height Desktop layouts
dvh Dynamic (adjusts for browser UI) Mobile full-height sections
svh Small (minimum visible) Conservative mobile layouts
lvh Large (maximum visible) Expanded mobile layouts

Frequently Asked Questions

What are CSS media query breakpoints?
CSS media query breakpoints are specific viewport widths where the layout changes to adapt to different screen sizes. Common breakpoints include 320px (small phones), 768px (tablets), 1024px (laptops), and 1920px (desktop). These align with typical device widths and enable responsive design.
What is the difference between vh, dvh, svh, and lvh?
vh is the standard viewport height unit. dvh (dynamic) adjusts for mobile browser UI like address bars. svh (small) uses the minimum visible height, while lvh (large) uses the maximum. Use dvh for mobile-friendly full-height layouts that respond to browser UI changes.
What is the ideal content width for readability?
The ideal content width for readability is 45-75 characters per line, commonly expressed as max-width: 65ch in CSS. This translates to approximately 520-650px for body text at 14-16px font size. Wider lines cause eye fatigue; narrower lines create excessive line breaks.
How do I choose responsive breakpoints?
Choose breakpoints based on content needs, not specific devices. Start with mobile-first (@media (min-width: 640px), 768px, 1024px, 1280px). Test layouts at intermediate widths. Common frameworks use: Tailwind (640/768/1024/1280/1536px), Bootstrap (576/768/992/1200px).