Breakpoints
Search the component library

Breakpoints

v1.0.1

This component defines the standard breakpoints to use for responsive design.

Usage Guidelines

Anytime you want to change a design based on the viewport width (i.e. use a media query) use the predefined widths provided by this component.

Features

  • Consistent set of breakpoints
  • Sizes for phones, small and large tablets, and desktop devices

Dependencies

None

Widths

The available sizes include:

  • Extra small
  • Small
  • Medium
  • Large
  • Extra large
Size >= Min < Max
xs 320px 480px
sm 480px 768px
md 768px 1024px
lg 1024px 1280px
xl 1280px

Common Devices

For reference, here are the breakpoints that correspond to common devices.

Apple Devices Viewport Width Breakpoint
iPhone 4S (Portrait) 320px Extra small
iPhone 5S (Portrait) 320px Extra small
iPhone 6S (Portrait) 375px Extra small
iPhone 6S Plus (Portrait) 414px Extra small
iPhone 4S (Landscape) 480px Small
iPhone 5S (Landscape) 568px Small
iPhone 6S (Landscape) 667px Small
iPhone 6S Plus (Landscape) 736px Small
iPad Mini/iPad Air (Portrait) 768px Medium
iPad Mini/iPad Air (Landscape) 1024px Large
iPad Pro (Portrait) 1024px Large
iPad Pro (Landscape) 1366px Extra large
Android Phones Viewport Width Breakpoint
Moto G/Moto X (Portrait) 360px Extra small
Galaxy S5/S6 (Portrait) 360px Extra small
Nexus 4 (Portrait) 384px Extra small
Nexus 6 (Portrait) 411px Extra small
LG G3 (Portrait) 480px Small
Galaxy Note 4 (Portrait) 480px Small
Moto G/Moto X (Landscape) 640px Small
Galaxy S5/S6 (Landscape) 640px Small
Nexus 4 (Landscape) 640px Small
Nexus 6 (Landscape) 731px Small
LG G3 (Landscape) 853px Medium
Galaxy Note 4 (Landscape) 853px Medium
Android Tablets Viewport Width Breakpoint
Nexus 7 (Portrait) 600px Small
Nexus 9 (Portrait) 768px Medium
Galaxy Tab 10 (Portrait) 800px Medium
Nexus 7 (Landscape) 960px Medium
Nexus 9 (Landscape) 1024px Large
Galaxy Tab 10 (Landscape) 1280px Extra large

Exported Styles

Available Styles Reference As (How do I use this?)
Extra Small [](/design/c/breakpoints/v1.0.1/#rd-extra-small)
Small [](/design/c/breakpoints/v1.0.1/#rd-small)
Medium [](/design/c/breakpoints/v1.0.1/#rd-medium)
Large [](/design/c/breakpoints/v1.0.1/#rd-large)
Extra Large [](/design/c/breakpoints/v1.0.1/#rd-extra-large)

Changelog

1.0.1

  • ADDED: Added sketch file featuring art boards with grid layout setup for easier consumption.

1.0.0

Initial version