100%

Common Breakpoints for Media Queries

R Proffitt
by Richard Proffitt
iopan design

I have given the list of commonly used media query numbers denoting device screen width (either minimum or maximum) below, as well as a list of media queries that will target different devices. Note that not only is the media query for screen width considered, but also orientation and pixel density.

320px  —  480px  —  768px  —  1024px  —  1224px  —  1824px

Whilst you may have seen these breakpoints mentioned before, there really are no hard and fast rules for where you actually place your breakpoints. You may find these guidelines helpful, or you may wish to tweak them according to your design. What is important though, is that you test your design in as many different browsers and as many different devices as possible… Only then can you be satisfied that the design will respond in the way you have planned.

Devices with their Breakpoints

“Great design is a multi-layered relationship between human life and its environment.”

Naoto Fukasawa
img

Do I need to Target Specific Devices?

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

Six different Smartphones

Smartphones (portrait and landscape)

This media query will capture all smartphones that have a device-width of between 320px and 480px; this covers the vast majority of mobile phones, although new devices are coming out all the time..

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

Smartphones (landscape)

This media query will capture all smartphones that have a minimum-width of 321px; which is approximately equal to the smaller phones in a landscape position.

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

Smartphones (portrait)

This media query will capture all smartphones that have a maximum-width of 320px; which is a common number for indicating mobile phones in a portrait position.

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

iPads (portrait and landscape)

This media query will capture all iPads as they have a minimum width of 768px (another common breakpoint) and a maximum width of 1024px

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

iPads (landscape)

This media query uses the minimum and maximum of 768px and 1024px again; with the added query that the device is oriented in the landscape position.

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

iPads (portrait)

Again, this media query uses the minimum and maximum of 768px and 1024px; with the added query this time that the device is oriented in the portrait position.

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

iPad 3

Notice that the media query that can detect the iPad 3, is one that looks at the device pixel ratio, the iPad 3 has a Retina display.

/**********
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 */
}
Desktop and laptop Computer

Desktops and laptops

This media query will capture all Desktop & Laptop Computers that have a minimum screen width of 1224px.

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}
Large Desktop Computer Screen

Large Screens

This media query will captures larger Desktop & Laptop Computers that have a minimum screen width of 1824px.

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

iPhone 4

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

iPhone 5

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

iPhone 6

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

iPhone 6+

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

Samsung Galaxy S3

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

Samsung Galaxy S4

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

Samsung Galaxy S5

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit.

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

Pellentesque venenatis tellus non purus tincidunt vitae ultrices tellus eleifend. Praesent quam augue, accumsan nec tempus dapibus, pharetra ac lacus. Nunc eleifend consequat justo id dapibus. In ut consequat massa. Nunc scelerisque suscipit leo nec imperdiet.

Nullam vel tellus

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧

 


Articles