Common CSS Media Queries Break Points

Css Responsive Design Media Queries

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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.)

Solution 2 - Css

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).

Solution 3 - Css

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.

Solution 4 - Css

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

Solution 5 - Css

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.

Solution 6 - Css

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

Solution 7 - Css

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

Solution 8 - Css


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

Solution 9 - Css

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.

Solution 10 - Css

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.

Solution 11 - Css

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

Solution 12 - Css

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

Using himansu's answer from above as a reference: https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points/23884178#23884178<br/> AND
https://www.w3schools.com/css/css3_mediaqueries.asp<br/>
your answer would be:

Solution 13 - Css

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).

Content Type	Original Author	Original Content on Stackoverflow
Question	Miguel Moura	View Question on Stackoverflow
Solution 1 - Css	ralph.m	View Answer on Stackoverflow
Solution 2 - Css	boz	View Answer on Stackoverflow
Solution 3 - Css	Adrian P.	View Answer on Stackoverflow
Solution 4 - Css	Nur Rony	View Answer on Stackoverflow
Solution 5 - Css	DannyB	View Answer on Stackoverflow
Solution 6 - Css	Suman KC	View Answer on Stackoverflow
Solution 7 - Css	elewinso	View Answer on Stackoverflow
Solution 8 - Css	himansu	View Answer on Stackoverflow
Solution 9 - Css	user2933101	View Answer on Stackoverflow
Solution 10 - Css	Marc	View Answer on Stackoverflow
Solution 11 - Css	Mukesh	View Answer on Stackoverflow
Solution 12 - Css	Luigi D'Amico	View Answer on Stackoverflow
Solution 13 - Css	michael	View Answer on Stackoverflow