Screen sizes and break points for responsive design

The number of device targets and screen sizes across the Windows 10 ecosystem is too great to worry about optimizing your UI for each one. Instead, we recommended designing for a few key widths (also called "breakpoints"): 360, 640, 1024 and 1366 epx.

Tip

When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window). When the app is running full-screen, the app window is the same size as the screen, but in other cases, it's smaller.

This table describes the different size classes and provides general recommendations for tailoring for those size classes.

responsive design breakpoints

Size class small medium large
Typical screen size (diagonal) 4" to 6" 7" to 12", or TVs 13" and larger
Typical devices Phones Phablets, tablets, TVs PCs, laptops, Surface Hubs
Common window sizes in effective pixels 320x569, 360x640, 480x854 960x540, 1024x640 1366x768, 1920x1080
Window width breakpoints in effective pixels 640px or less 641px to 1007px 1008px or greater
General recommendations
  • Center tab elements.
  • Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • Dock app bars to the bottom of the window for improved reachability
  • Use one column/region at a time
  • Use an icon to represent search (don't show a search box).
  • Put the navigation pane in overlay mode to conserve screen space.
  • If you're using the master details pattern, use the stacked presentation mode to save screen space.
  • Make tab elements left-aligned.
  • Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Put command elements like app bars at the top of the app window.
  • Up to two columns/regions
  • Show the search box.
  • Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • Consider further tailoring for TV experiences.
  • Make tab elements left-aligned.
  • Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Put command elements like app bars at the top of the app window.
  • Up to three columns/regions
  • Show the search box.
  • Put the navigation pane into docked mode so that it always shows.

With Continuum for Phones, a new experience for compatible Windows 10 mobile devices, users can connect their phones to a monitor, mouse and keyboard to make their phones work like laptops. Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the small size class.