Exploring Media Breakpoints. : Lukas from Pexels
PHOTO BY Lukas from Pexels

Exploring Media Breakpoints

Written by MH in Articles for SORSO
Published Fri. 30th of Mar 2018 URL Exploring Media Breakpoints

There are a thousand and one different approaches to which breakpoints will get you most coverage and easy to work with. Let's explore what could work for you.

What are Media Breakpoints?
Breakpoints are the point of which your sites content will respond to and provide the user with the best possible layout to consume the information you are serving. It is a way to serve a nice looking layout of a site on mobile, tablet, desktop and even TV's.

Do you need to worry?
It depends, if you want your site to look pixel perfect on basically any device, then yes, you need to worry. But, if you set 3 break points for the following ones, you are in very good shape. The breakpoints one always should set are: mobile (up to 768px), tablet (up to 1024px) and desktop (from 1024px).

What does CSS frameworks offer?
Most of the CSS Frameworks that are outthere follow in essence the three breakpoints meantioned above, but some add more specific ones for either higher or lower resolutions. Below are some examples of the more well known ones. These are just some of the hundreds, if not thousands, of CSS Frameworks available on the internet.

Bootstrap - http://getbootstrap.com

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } 

Bulma - https://bulma.io

// Small devices (landscape phones, 0px and up)
@media (max-width: 768px) { ... }

// Medium devices (tablets, 769px and up)
@media (min-width: 769px) { ... }

// Large devices (desktops, 1024px and up)
@media (min-width:1024px) { ... }

// Extra large devices (large desktops, 1216px and up)
@media (min-width: 1216px) { ... }

// FullHD devices (large desktops, 1408px and up)
@media (min-width: 1408px) { ... }

Foundation - https://foundation.zurb.com

// Small devices (landscape phones, 0px and up)
@media (min-width: 0px) { ... }

// Medium devices (tablets, 640px and up)
@media (min-width: 640px) { ... }

// Large devices (desktops, 1024px and up)
@media (min-width: 1024px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } 

// Super Extra large devices (large desktops, 1440px and up)
@media (min-width: 1440px) { ... } 

Pure - https://purecss.io

// Small devices (landscape phones, 568px and up)
@media (min-width: 568px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 1024px and up)
@media (min-width: 1024px) { ... }

// Extra large devices (large desktops, 1280px and up)
@media (min-width: 1280px) { ... }

All in all they follow a certain pattern to be as general and purposeful as possible. All with their own take on what is the best solution for presenting the layout you've made in the best way possible. Since there isn't a "one-size-fits-all" solution, you need to find the one that suits you the best and also offers something that is either general enough or specific enough for it to not be overly complicated, since one can complicate it alot.

What if I want to be very specific with my media breakpoints?
If you are one of those that simply needs total control and wants to serve your content in a highly customized way, then there is this list of media breakpoints that you might want to take a look at. It is far from complete or 100% accurate, but it will give you the direction in which to lean towards.

/* 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 */
}

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

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

/* iPhone 6 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* iPhone 6+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* Samsung Galaxy S3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* Samsung Galaxy S4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

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

/* Samsung Galaxy S5 */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

 


Tag