Common CSS Media Queries Break Points

Question

I am working on a Responsive Web Site with CSS Media Queries.

Is the following a good organization for devices? Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen

What are the common media queries break-point values?

I am planning to use the following breakpoints:

320: Smartphone Portrait
481: Smartphone Landscape
641 or 768 ???: IPad Portrait ???
961: IPad Landscape / Small Laptop ???
1025: Desktop and Laptop
1281: Wide Screen

What do you think? I have a few doubts as ??? points.

possible duplicate: http://stackoverflow.com/q/8564752/3597276 — Michael Benjamin, Mar 20 '16 at 15:43

score 197 · Answer 1 · answered May 08 '13 at 15:43

197

Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)

answered May 08 '13 at 15:43

ralph.m

13,468
3
23
30

2

I agree but I would like to have a few references to work around it ... I just updated initial text. I added breakpoint values. What do you think? I am still not sure about 641 / 768 / ... – Miguel Moura May 09 '13 at 10:46
10

As I mentioned, if you try to chase screen sizes you'll get overwhelmed, as there are many of them. Let your layout dictate where the breakpoints need to be. You may only need one or two. :) – ralph.m May 09 '13 at 10:50
1

Responsive not Adaptive is indeed the right buzzword direction to head in. Agree with you Ralph. (But also understand helping legacy systems be reasonably mobile with stopgap breakpoints is often a necessity.) – doublejosh Jun 14 '13 at 21:36
8

This is spot on and should be the accepted answer. There are no 'common' screen sizes. – iamkeir Jul 30 '13 at 14:37
4

here's a great article outlining why this is a bad way to go about the problem and how you should approach multi device css: http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ – prodaea Jul 14 '14 at 20:00
This should be the accepted answer and the default approach to media queries. It's way less exhaustive to have a few media queries setup on natural breakpoints than it is to use a myriad of arbitrary ones. – Jack Jul 23 '14 at 14:58
1

Blog post linked in a comment here goes to 404, I believe the new URL is https://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ – Sayed Ibrahim Hashimi Jul 02 '20 at 18:07

score 101 · Answer 2 · answered May 08 '13 at 14:54

101

I've been using:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

It keeps things relatively simple and allows you to do something a bit different for phones in portrait mode (a lot of the time I find myself having to change various elements for them).

answered May 08 '13 at 14:54

boz

4,891
5
41
68

Where do you place ipad there? And what if you have a desktop with a large screen? – Miguel Moura May 08 '13 at 15:07
The ipad is in `min-width: 768px`. If you have a desktop with a large screen then you can go ahead and add something like `@media only screen and (min-width: 1176px)`. What I put in my answer is the media queries I find myself using the most. – boz May 08 '13 at 15:17
I have also found this: http://alpha.responsivedesign.is/develop/media-queries/media-queries-for-common-device-breakpoints. But it seems to much for a simple web site. – Miguel Moura May 08 '13 at 15:17
It depends if you want to show high-resolution images for retina displays with the help of `background-size` or not. If you do, then you will need separate media queries that detect `min-device-pixel-ratio`. – boz May 08 '13 at 15:18
could you link to mockup. i fail to see how 767px works with phones – b_dubb Dec 15 '13 at 01:38
@b_dubb unfortunately I don't have anything to hand - all of my recent sites have been internal only jobs :( – boz Dec 16 '13 at 09:25
@boz Thanks for this. I didn't use it exactly as shown in your answer, but it pointed me in the right direction – Jez D May 22 '14 at 11:40

Adrian P. · Answer 3 · 2019-04-04T13:06:53.107

I'm using 4 break points but as ralph.m said each site is unique. You should experiment. There are no magic breakpoints due to so many devices, screens, and resolutions.

Here is what I use as a template. I'm checking the website for each breakpoint on different mobile devices and updating CSS for each element (ul, div, etc.) not displaying correctly for that breakpoint.

So far that was working on multiple responsive websites I've made.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}

UPDATE

As per September 2015, I'm using a better one. I find out that these media queries breakpoints match many more devices and desktop screen resolutions.

Having all CSS for desktop on style.css

All media queries on responsive.css: all CSS for responsive menu + media break points

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

Update 2019: As per Hugo comment below, I removed max-width 1999px because of the new very wide screens.

I would remove (max-width: 1999px) and let everything above 992px fit in this rule. — Hugo Passos, Nov 30 '18 at 04:26

score 54 · Answer 4 · answered Nov 30 '13 at 07:44

This is from css-tricks link

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

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Yeah, my trick is I created a mixin in saas and use it whereever I need it. :-) — Nur Rony, Jul 06 '16 at 06:09

score 18 · Answer 5 · answered May 08 '13 at 14:43

18

I can tell you I am using just a single breakpoint at 768 - that is min-width: 768px to serve tablets and desktops, and max-width: 767px to serve phones.

I haven't looked back since. It makes the responsive development easy and not a chore, and provides a reasonable experience on all devices at minimal cost to development time without the need to fear a new Android device with a new resolution you haven't factored in.

answered May 08 '13 at 14:43

DannyB

12,810
5
55
65

Don't confuse pixels with points. Phones at high density (aka retina) screens still report the lower resolution. Here is a nice little CSS gist that may add some hints https://gist.github.com/levibuzolic/947778 – DannyB May 08 '13 at 14:59
1

Well, according to this site http://nmsdvid.com/snippets/, Galaxy S2 is 320x533 - so I am not sure how you saw a desktop version. Did you have `` in your `` ? – DannyB May 08 '13 at 15:10

Suman KC · Answer 6 · 2014-05-26T10:56:45.190

Media Queries for Standard Devices

In General for Mobile, Tablets, Desktop and Large Screens

1. Mobiles

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

    /* Styles */

    }

2. Tablets

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

3. Desktops & laptops

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4. Larger Screens

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

In Detail including landscape and portrait

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

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

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

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* 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 (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Reference

score 11 · Answer 7 · answered Dec 29 '13 at 12:37

11

Consider using twitter bootstrap's break points. with such a massive adoption rate you should be safe...

answered Dec 29 '13 at 12:37

elewinso

2,453
5
22
27

21

For the lazy. <768, <992, <1200, >=1200. – CodeClimber Dec 18 '14 at 21:21
1

Really hate their sm, md, lg system! Not understandable for me! Especially when it comes to column resets. And, your suggestion make mandatory to use bootstrap on your design. – Adrian P. Dec 24 '15 at 16:00
@AdrianP. You can customize Bootstrap on their site and just download a css file to use only the grid system, doing this you aren't forced into their design. – m.e.conroy Jan 12 '16 at 17:18
in BOOTSTRAP 4 they have extended breakpoints: XS:0 (Extra small screen / phone), SM:544px (Small screen / phone), MD:768px (Medium screen / tablet), LG:992px (Large screen / desktop), XL:1200px (Extra large screen / wide desktop) – Farside Feb 23 '16 at 14:54
"with such a massive adoption rate you should be safe" - disagree 100%. use != value. bootstrap makes developers lives easier, but that doesn't make the product better. bootstrap was horrible for accessibility for the longest time. – albert Jun 22 '17 at 14:16

score 9 · Answer 8 · answered May 27 '14 at 08:08


@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

score 4 · Answer 9 · answered Apr 09 '14 at 14:04

If you go to your google analytics you can see which screen resolutions your visitors to the website use:

Audience > Technology > Browser & OS > Screen Resolution ( in the menu above the stats)

My site gets about 5,000 visitors a month and the dimensions used for the free version of responsinator.com are pretty accurate summary of my visitors' screen resolutions.

This could save you from needing to be too perfectionistic.

score 4 · Answer 10 · answered Jan 22 '15 at 14:04

4

I always use Desktop first, mobile first doesn't have highest priority does it? IE< 8 will show mobile css..

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

sometimes some custom sizes. I don't like bootstrap etc.

answered Jan 22 '15 at 14:04

Marc

248
2
4
15

6

It is time to stop developing for IE < 8, and for many sites, mobile should have first priority. – billrichards Mar 19 '15 at 00:51
Agree, but thats not the main reason I use desktop first – Marc May 02 '17 at 15:07
2

Apparently I had a strong opinion about this on March 19, 2015 :) – billrichards May 02 '17 at 21:08

score 3 · Answer 11 · answered Feb 21 '14 at 17:20

3

Instead of using pixels should use em or percentage as it is more adaptive and fluid, better not target devices target your content:

HTML5 rockrs read, mobile first

answered Feb 21 '14 at 17:20

Mukesh

858
1
10
21

Luigi D'Amico · Answer 12 · 2018-06-05T07:09:49.860

3

Keep your code clean and stylesheets logically separated per screen 'media' type config...

1) Using himansu's answer from above as a reference: Common CSS Media Queries Break Points
AND
2) https://www.w3schools.com/css/css3_mediaqueries.asp

your answer would be:

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">

edited Jun 05 '18 at 07:09

answered May 23 '17 at 11:20

Luigi D'Amico

665
7
11

1

Is the first media string supposed to be missing the `@`? – RagingRoosevelt May 03 '18 at 16:28
1

Thanks RaginRoosevelt --> not supposed to be missing the @. I've edited as required for future generations - thanks for checking! – Luigi D'Amico May 07 '18 at 06:35
why making two https request ??? we can simply put them in one file , isn't that cool ??? – amdev May 24 '18 at 12:36
Thanks Ellisson... fair point. But don't modern browsers aggregate the the calls these days! – Luigi D'Amico Jun 05 '18 at 07:09

score 2 · Answer 13 · edited Feb 12 '16 at 13:55

2

Your break points look really good. I've tried 768px on Samsung tablets and it goes beyond that, so I really like the 961px. You don't necessarily need all of them if you use responsive CSS techniques, like % width/max-width for blocks and images (text as well).

edited Feb 12 '16 at 13:55

mmcglynn

7,668
16
52
76

answered Nov 15 '13 at 00:33

michael

21
1

Common CSS Media Queries Break Points

13 Answers13

Linked

Related