How to Set Breakpoints in Responsive Design

Responsive web design

Just a place for some incoherent note taking about responsive design.

Design elements to address

  • Font-size and leading
  • White space
  • Vertical space
  • Flow
  • Page element ordering
  • Image and media size

3-, 2- and 1-column layouts

Media Queries

Old school was to set breakpoints at device sizes:

  • Mobile (portrait): <=320px
  • Mobile (landscape): <=480px
  • Tablet (portrait): <=768px
  • Tablet (landscape): <1024
  • Desktop: >=1024

New school thought is to design on readability. Best readability is 45-75 characters (about 10 words) per single-column line.

Mobile First

But don’t depend on these breakpoints. Design for mobile first, then add a breakpoint to modify your design when the mobile version no longer looks good. Continue in this vein all the way up to desktop.

Smaller screens call for smaller fonts.

Don’t Forget Larger Monitors

Televisions? Billboards?

Set a maximum width to avoid having the text go all the way to the border:

#container {
    margin: 0 auto;
    max-width: 18000px; /* A really big width */
}

Common Device Breakpoints

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

 

Sources: