Media Queries: How to target desktop, tablet and mobile?

388

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile

only screen and (min-width: 480px)



# Tablet

only screen and (min-width: 768px) 



# Desktop

only screen and (min-width: 992px)



# Huge

only screen and (min-width: 1280px)

Or:

# Phone

only screen and (max-width:320px)



# Tablet

only screen and (min-width:321px) and (max-width:768px)



# Desktop

only screen and (min-width:769px)

What do you think these 'breakpoints' should be for each device?

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

– Ahsan Rathod
Jun 16 '11 at 12:01

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices

– Dmytro Dzyubak
Jul 1 '14 at 12:49

For details you can visit the link stackoverflow.com/questions/27222739/…

– Kusumakar Pant
Dec 1 '14 at 7:29

add a comment |

388

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile

only screen and (min-width: 480px)



# Tablet

only screen and (min-width: 768px) 



# Desktop

only screen and (min-width: 992px)



# Huge

only screen and (min-width: 1280px)

Or:

# Phone

only screen and (max-width:320px)



# Tablet

only screen and (min-width:321px) and (max-width:768px)



# Desktop

only screen and (min-width:769px)

What do you think these 'breakpoints' should be for each device?

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

– Ahsan Rathod
Jun 16 '11 at 12:01

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices

– Dmytro Dzyubak
Jul 1 '14 at 12:49

For details you can visit the link stackoverflow.com/questions/27222739/…

– Kusumakar Pant
Dec 1 '14 at 7:29

add a comment |

388

325

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile

only screen and (min-width: 480px)



# Tablet

only screen and (min-width: 768px) 



# Desktop

only screen and (min-width: 992px)



# Huge

only screen and (min-width: 1280px)

Or:

# Phone

only screen and (max-width:320px)



# Tablet

only screen and (min-width:321px) and (max-width:768px)



# Desktop

only screen and (min-width:769px)

What do you think these 'breakpoints' should be for each device?

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile

only screen and (min-width: 480px)



# Tablet

only screen and (min-width: 768px) 



# Desktop

only screen and (min-width: 992px)



# Huge

only screen and (min-width: 1280px)

Or:

# Phone

only screen and (max-width:320px)



# Tablet

only screen and (min-width:321px) and (max-width:768px)



# Desktop

only screen and (min-width:769px)

What do you think these 'breakpoints' should be for each device?

css css3 mobile media-queries tablet

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

edited May 2 '13 at 13:06

Quantastical

11.8k43060

edited May 2 '13 at 13:06

Quantastical

11.8k43060

edited May 2 '13 at 13:06

Quantastical

11.8k43060

asked Jun 16 '11 at 10:57

betamax

6,35383053

asked Jun 16 '11 at 10:57

betamax

6,35383053

asked Jun 16 '11 at 10:57

betamax

6,35383053

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

– Ahsan Rathod
Jun 16 '11 at 12:01

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices

– Dmytro Dzyubak
Jul 1 '14 at 12:49

For details you can visit the link stackoverflow.com/questions/27222739/…

– Kusumakar Pant
Dec 1 '14 at 7:29

add a comment |

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

– Ahsan Rathod
Jun 16 '11 at 12:01

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices

– Dmytro Dzyubak
Jul 1 '14 at 12:49

For details you can visit the link stackoverflow.com/questions/27222739/…

– Kusumakar Pant
Dec 1 '14 at 7:29

Check out these helpful articles: * How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

– Ahsan Rathod
Jun 16 '11 at 12:01

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices

– Dmytro Dzyubak
Jul 1 '14 at 12:49

For details you can visit the link stackoverflow.com/questions/27222739/…

– Kusumakar Pant
Dec 1 '14 at 7:29

add a comment |

14 Answers
14

active

oldest

votes

528

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working you way onto larger and larger screens. Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

1

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

15

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

2

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

4

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

4

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

|
show 10 more comments

144

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

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

Here are some good articles:

How to fit your website for the Apple iPad

CSS3 Media Queries

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

22

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

30

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

6

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

|
show 4 more comments

131

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

develop the site for mobile first using percentages or ems, not pixels,

then try it in a larger viewport and note where it begins to fail,

redesign the layout and add a CSS media query just to handle the broken parts,

repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

The 'breakpoints' then become the actual point at which your mobile design begins to 'break' i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.

If you're not trying to pin a design to an exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpoint ensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, not for a specific device size.

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

5

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

2

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

1

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

|
show 4 more comments

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

Also, have this debugging piece of code right after your media query
e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { 

  /* for 10 inches tablet screens */

  body::before {

    content: "tablet to some desktop media query (769 > 1281) fired";

    font-weight: bold;

    display: block;

    text-align: center;

    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 99;

  }

}

Add this debugging item in every single media query and you will see what query has being applied.

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

add a comment |

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 

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



    }



    /* Extra Small Devices, Phones */ 

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



    }



    /* Small Devices, Tablets */

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



    }



    /* Medium Devices, Desktops */

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



    }



    /* Large Devices, Wide Screens */

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



    }

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

add a comment |

Media queries for 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 */

}



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

}

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

add a comment |

Extra small devices (phones, up to 480px)

Small devices (tablets, 768px and up)

Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)

Large devices (large desktops, 1200px and up)

portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px

portrait tablets, portrait iPad, landscape e-readers - min-width:641px

tablet, landscape iPad, lo-res laptops - min-width:961px

HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3

Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5

Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -

Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3

LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2

Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)

iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1

iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)

iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)

iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)

iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

1

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

add a comment |

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density.
Hence "min-width:" and "max-width:" are useless.
A full explanation of this issue is here:
what exactly is device pixel ratio?

"@media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

5

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

add a comment |

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

The easiest way to go about this is to grab your completed desktop design and open it in your web browser. Shrink the screen slowly to make it narrower. Observe to see when the design starts to, "break", or looks horrible and cramped. At this point a break point with a media query would be required.

It's common to create three sets of media queries for desktop, tablet and phone. But if your design looks good on all three, why bother with the complexity of adding three different media queries that are not necessary. Do it on an as-needed basis!

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

add a comment |

Nowadays the most common thing is to see retina-screen devices, in other words: devices with high resolutions and a very high pixel density (but usually smaller than 6 inches physical size). That's why you will need retina display specialized media-queries on your CSS. This is the most complete example I could find:

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



  /* Small screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Small screen, retina, stuff to override above media query */



}



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



  /* Medium screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (                min-resolution: 192dpi) and (min-width: 700px),

only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 



  /* Medium screen, retina, stuff to override above media query */



}



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



  /* Large screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (                min-resolution: 192dpi) and (min-width: 1300px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 



  /* Large screen, retina, stuff to override above media query */



}

Source: CSS-Tricks Website

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

add a comment |

The behavior does not change on desktop. But on tablets and mobiles, I expand the navbar to cover the big logo image. Note: Use the margin (top and bottom) as much as you need for your logo height.

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 

  .navbar-toggle {

      margin: 60px 0;

  }

}

Check the navbar here.

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

add a comment |

Extra small devices ~ Phones (< 768px)

Small devices ~ Tablets (>= 768px)

Medium devices ~ Desktops (>= 992px)

Large devices ~ Desktops
(>= 1200px)

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

add a comment |

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">

<link href="justForFrint.css" rel="stylesheet" media="print">

<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

With this, the browser will download all CSS resources, regardless of the media attribute.
The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

answered Jan 13 at 19:54

Juanma Menendez

19619

add a comment |

-1

@media (max-width: 767px)   {



      .container{width:100%} *{color:green;}-Mobile



    }





    @media (min-width: 768px)  {



     .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 768px) and (orientation:portrait)  {



       .container{width:100%} *{color:yellow  } -Mobile



    }

    @media (min-width: 1024px)  {



       .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 1200px)  {



    .container{width:1180px} *{color:pink   } -Desktop



    }

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

add a comment |

protected by Hashem Qolami Mar 27 '15 at 14:48

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

14 Answers
14

active

oldest

votes

14 Answers
14

active

oldest

votes

528

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

1

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

15

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

2

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

4

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

4

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

|
show 10 more comments

528

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

1

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

15

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

2

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

4

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

4

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

|
show 10 more comments

528

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

edited Jun 28 '17 at 5:22

answered Sep 8 '11 at 21:19

ryanve

28k2270110

answered Sep 8 '11 at 21:19

ryanve

28k2270110

answered Sep 8 '11 at 21:19

ryanve

28k2270110

1

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

15

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

2

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

4

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

4

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

|
show 10 more comments

1

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

15

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

2

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

4

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

4

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

I've been wondering about incrementing the lower limit of media queries. Seems logical, but haven't seen it mentioned too often. I'd even take it one step further and convert to ems. Look at @jonikorpi screenshots of Ethan Marcotte's site behaviour with zooming and px media queries. github.com/scottjehl/Respond/issues/18

– Larry
Feb 10 '12 at 14:00

Why would you use min-width rather than max-width? How would you prevent that the min-width: 320px css overrides the min-width: 801px ?

– user2019515
Mar 1 '13 at 15:40

This code doesn't work on my mobile devices! Can someone provide a working example!

– Jacob
Apr 2 '13 at 11:13

I made a gist for this gist.github.com/chrisjlee/5832418

– chrisjlee
Jun 21 '13 at 16:26

2018 - 2k and 4k are on the increase

– Alexander
Apr 25 '18 at 21:25

|
show 10 more comments

144

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

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

Here are some good articles:

How to fit your website for the Apple iPad

CSS3 Media Queries

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

22

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

30

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

6

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

|
show 4 more comments

144

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

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

Here are some good articles:

How to fit your website for the Apple iPad

CSS3 Media Queries

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

22

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

30

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

6

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

|
show 4 more comments

144

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

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

Here are some good articles:

How to fit your website for the Apple iPad

CSS3 Media Queries

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

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

Here are some good articles:

How to fit your website for the Apple iPad

CSS3 Media Queries

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

edited Mar 17 '14 at 5:13

Fizzix

12.4k2583135

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

answered Jun 16 '11 at 11:10

sandeep

76.5k17118145

22

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

30

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

6

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

|
show 4 more comments

22

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

30

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

6

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

My tablet has a width of 2560x1600

– LeeGee
Jan 11 '14 at 0:20

That may be so, but browsers on mobile devices have a "device pixel ratio". This is where it treats each logical "pixel" as 2, 3 or even more actual pixels on your device. Otherwise a 20px high would will be very small and impossible to press - especially on your screen!

– greg84
Jan 15 '14 at 0:01

@media only screen and (min-device-width: 480px){} I tried it - matches also for desktops. But what if we want only mobile device?

– Darius.V
May 28 '14 at 7:11

@Darius.V, this follows the "Mobile First" mentality, that means you start mobile and then make changes as the screen gets bigger, so you'd need to also include: @media only screen and (min-device-width: 1024){} or something like that to override these changes. Alternatively, you could do @media only screen and (MAX-device-width: 1024){} if you started with a desktop design and want to make changes only to things smaller than 1024.

– Steely
Apr 15 '15 at 22:49

This means that desktop will not work with RWD because of the min-device-width. Recommend to do min-width and nothing device based. True responsive should not require refresh or device limited

– TheBlackBenzKid
Jan 21 '16 at 8:46

|
show 4 more comments

131

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

develop the site for mobile first using percentages or ems, not pixels,

then try it in a larger viewport and note where it begins to fail,

redesign the layout and add a CSS media query just to handle the broken parts,

repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

5

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

2

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

1

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

|
show 4 more comments

131

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

develop the site for mobile first using percentages or ems, not pixels,

then try it in a larger viewport and note where it begins to fail,

redesign the layout and add a CSS media query just to handle the broken parts,

repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

5

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

2

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

1

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

|
show 4 more comments

131

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

develop the site for mobile first using percentages or ems, not pixels,

then try it in a larger viewport and note where it begins to fail,

redesign the layout and add a CSS media query just to handle the broken parts,

repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

develop the site for mobile first using percentages or ems, not pixels,

then try it in a larger viewport and note where it begins to fail,

redesign the layout and add a CSS media query just to handle the broken parts,

repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

edited Nov 30 '15 at 11:38

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

answered Dec 3 '13 at 12:17

Dave Everitt

10.6k45076

5

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

2

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

1

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

|
show 4 more comments

5

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

2

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

1

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

Customer will want their site to look like that on their iPad. My best breakpoint would make the site switch to mobile layout on the iPad. Customer would not accept that, they want fancy version to appear on the iPad and other tablets. General wisdom isn't paying my salary :) I needed to do tricks with the viewport meta tag. It was very painful but I pulled it off with a little help from JavaScript (as always). PS: I used cm units, not pixels.

– Rolf
May 16 '14 at 21:19

With natural breakpoints you can have a mid-sized breakpoint that includes the iPad (and other tablets) in landscape mode, or add another breakpoint for portrait mode. I've sometimes used four breakpoints, always starting CSS and all markup with mobile-first (it's harder to scale down and focussing on the mobile means your design and content is pared down to the essentials, which you can expand as the sizes increase), one just above 400px wide (or 'above mobile size'), then two desktop-sizes, one extra-wide. You can then style the 'above mobile' breakpoint to work nicely on the iPad.

– Dave Everitt
May 17 '14 at 8:55

This is not enough for all cases. Take for example, checkboxes. They may be fine for all web browsers on a PC, but on a tablet be to small for the user to touch it. Sometimes you do need to target devices, whether that's general wisdom or not. This is a good article: html5rocks.com/en/mobile/cross-device

– monalisa717
Aug 27 '14 at 16:43

I'm with Dave on this one - there are so many devices that you cannot design for all of them. Using natural breakpoints ensures your site works regardless of available screen size. Regarding customer wanting their site to look a certain way - you need to educate them. Regarding checkboxes being too small - where are your labels?

– diggersworld
Sep 11 '14 at 10:27

@user1411056 - good article. I guess it depends on what you're aiming at and how your site/webapp works. I'd say basic responsive design should underpin everything before refinements are put in place. diggersworld I'm all for educating clients - why else are they paying you? And yes, checkboxes can be responsive; tapping a label is equivalent, and labels can be styled. Then there's the uselessness of hover on touch devices; which can have large screens, and the 300ms tap delay. A basic RD foundation, enhanced by JS.

– Dave Everitt
Sep 12 '14 at 16:19

|
show 4 more comments

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

Also, have this debugging piece of code right after your media query
e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { 

  /* for 10 inches tablet screens */

  body::before {

    content: "tablet to some desktop media query (769 > 1281) fired";

    font-weight: bold;

    display: block;

    text-align: center;

    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 99;

  }

}

Add this debugging item in every single media query and you will see what query has being applied.

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

add a comment |

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

Also, have this debugging piece of code right after your media query
e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { 

  /* for 10 inches tablet screens */

  body::before {

    content: "tablet to some desktop media query (769 > 1281) fired";

    font-weight: bold;

    display: block;

    text-align: center;

    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 99;

  }

}

Add this debugging item in every single media query and you will see what query has being applied.

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

add a comment |

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

Also, have this debugging piece of code right after your media query
e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { 

  /* for 10 inches tablet screens */

  body::before {

    content: "tablet to some desktop media query (769 > 1281) fired";

    font-weight: bold;

    display: block;

    text-align: center;

    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 99;

  }

}

Add this debugging item in every single media query and you will see what query has being applied.

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

Also, have this debugging piece of code right after your media query
e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { 

  /* for 10 inches tablet screens */

  body::before {

    content: "tablet to some desktop media query (769 > 1281) fired";

    font-weight: bold;

    display: block;

    text-align: center;

    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 99;

  }

}

Add this debugging item in every single media query and you will see what query has being applied.

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

edited Jan 12 at 22:25

Bishop

2,30811524

edited Jan 12 at 22:25

Bishop

2,30811524

edited Jan 12 at 22:25

Bishop

2,30811524

answered Oct 20 '13 at 4:15

user2060451

1,24111527

answered Oct 20 '13 at 4:15

user2060451

1,24111527

answered Oct 20 '13 at 4:15

user2060451

1,24111527

add a comment |

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 

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



    }



    /* Extra Small Devices, Phones */ 

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



    }



    /* Small Devices, Tablets */

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



    }



    /* Medium Devices, Desktops */

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



    }



    /* Large Devices, Wide Screens */

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



    }

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

add a comment |

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 

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



    }



    /* Extra Small Devices, Phones */ 

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



    }



    /* Small Devices, Tablets */

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



    }



    /* Medium Devices, Desktops */

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



    }



    /* Large Devices, Wide Screens */

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



    }

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

add a comment |

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 

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



    }



    /* Extra Small Devices, Phones */ 

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



    }



    /* Small Devices, Tablets */

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



    }



    /* Medium Devices, Desktops */

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



    }



    /* Large Devices, Wide Screens */

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



    }

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ 

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



    }



    /* Extra Small Devices, Phones */ 

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



    }



    /* Small Devices, Tablets */

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



    }



    /* Medium Devices, Desktops */

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



    }



    /* Large Devices, Wide Screens */

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



    }

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

answered Jan 4 '17 at 8:01

Santosh Khalse

5,65622832

add a comment |

Media queries for 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 */

}



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

}

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

add a comment |

Media queries for 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 */

}



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

}

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

add a comment |

Media queries for 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 */

}



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

}

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

Media queries for 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 */

}



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

}

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

edited Jun 2 '16 at 17:48

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

answered Jun 2 '16 at 17:43

purvik7373

2,95132030

add a comment |

Extra small devices (phones, up to 480px)

Small devices (tablets, 768px and up)

Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)

Large devices (large desktops, 1200px and up)

portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px

portrait tablets, portrait iPad, landscape e-readers - min-width:641px

tablet, landscape iPad, lo-res laptops - min-width:961px

HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3

Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5

Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -

Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3

LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2

Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)

iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1

iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)

iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)

iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)

iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

1

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

add a comment |

Extra small devices (phones, up to 480px)

Small devices (tablets, 768px and up)

Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)

Large devices (large desktops, 1200px and up)

portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px

portrait tablets, portrait iPad, landscape e-readers - min-width:641px

tablet, landscape iPad, lo-res laptops - min-width:961px

HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3

Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5

Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -

Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3

LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2

Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)

iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1

iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)

iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)

iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)

iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

1

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

add a comment |

Extra small devices (phones, up to 480px)

Small devices (tablets, 768px and up)

Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)

Large devices (large desktops, 1200px and up)

portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px

portrait tablets, portrait iPad, landscape e-readers - min-width:641px

tablet, landscape iPad, lo-res laptops - min-width:961px

HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3

Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5

Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -

Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3

LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2

Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)

iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1

iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)

iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)

iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)

iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

Extra small devices (phones, up to 480px)

Small devices (tablets, 768px and up)

Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)

Large devices (large desktops, 1200px and up)

portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px

portrait tablets, portrait iPad, landscape e-readers - min-width:641px

tablet, landscape iPad, lo-res laptops - min-width:961px

HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3

Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5

Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -

Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3

LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2

Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)

iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1

iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)

iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)

iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)

iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

answered Nov 5 '13 at 5:41

Web Designer cum Promoter

1,1131024

1

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

add a comment |

1

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) TESTED and worked.

– user2060451
Mar 21 '14 at 5:46

add a comment |

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

5

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

add a comment |

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

5

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

add a comment |

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

edited May 23 '17 at 12:18

Community♦

edited May 23 '17 at 12:18

Community♦

edited May 23 '17 at 12:18

Community♦

answered Oct 16 '14 at 7:54

jumpjack

3091514

answered Oct 16 '14 at 7:54

jumpjack

3091514

answered Oct 16 '14 at 7:54

jumpjack

3091514

5

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

add a comment |

5

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

Great. So what should the media queries be?

– PKHunter
Feb 2 '17 at 14:04

add a comment |

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

add a comment |

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

add a comment |

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

edited Jan 12 at 22:32

Bishop

2,30811524

edited Jan 12 at 22:32

Bishop

2,30811524

edited Jan 12 at 22:32

Bishop

2,30811524

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

answered Sep 1 '16 at 1:58

Robert Rocha

4,548104175

add a comment |

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



  /* Small screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Small screen, retina, stuff to override above media query */



}



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



  /* Medium screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (                min-resolution: 192dpi) and (min-width: 700px),

only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 



  /* Medium screen, retina, stuff to override above media query */



}



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



  /* Large screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (                min-resolution: 192dpi) and (min-width: 1300px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 



  /* Large screen, retina, stuff to override above media query */



}

Source: CSS-Tricks Website

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

add a comment |

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



  /* Small screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Small screen, retina, stuff to override above media query */



}



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



  /* Medium screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (                min-resolution: 192dpi) and (min-width: 700px),

only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 



  /* Medium screen, retina, stuff to override above media query */



}



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



  /* Large screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (                min-resolution: 192dpi) and (min-width: 1300px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 



  /* Large screen, retina, stuff to override above media query */



}

Source: CSS-Tricks Website

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

add a comment |

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



  /* Small screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Small screen, retina, stuff to override above media query */



}



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



  /* Medium screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (                min-resolution: 192dpi) and (min-width: 700px),

only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 



  /* Medium screen, retina, stuff to override above media query */



}



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



  /* Large screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (                min-resolution: 192dpi) and (min-width: 1300px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 



  /* Large screen, retina, stuff to override above media query */



}

Source: CSS-Tricks Website

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

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



  /* Small screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Small screen, retina, stuff to override above media query */



}



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



  /* Medium screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),

only screen and (                min-resolution: 192dpi) and (min-width: 700px),

only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 



  /* Medium screen, retina, stuff to override above media query */



}



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



  /* Large screen, non-retina */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),

only screen and (                min-resolution: 192dpi) and (min-width: 1300px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 



  /* Large screen, retina, stuff to override above media query */



}

Source: CSS-Tricks Website

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

answered Apr 2 '18 at 5:24

Ezequiel Adrian

503722

add a comment |

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 

  .navbar-toggle {

      margin: 60px 0;

  }

}

Check the navbar here.

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

add a comment |

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 

  .navbar-toggle {

      margin: 60px 0;

  }

}

Check the navbar here.

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

add a comment |

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 

  .navbar-toggle {

      margin: 60px 0;

  }

}

Check the navbar here.

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

For my case, 60px top and bottom worked perfectly!

@media (max-width:768px) { 

  .navbar-toggle {

      margin: 60px 0;

  }

}

Check the navbar here.

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

edited Jan 12 at 22:28

Bishop

2,30811524

edited Jan 12 at 22:28

Bishop

2,30811524

edited Jan 12 at 22:28

Bishop

2,30811524

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

answered Oct 23 '16 at 5:40

Pratik Khadloya

7,74955879

add a comment |

Extra small devices ~ Phones (< 768px)

Small devices ~ Tablets (>= 768px)

Medium devices ~ Desktops (>= 992px)

Large devices ~ Desktops
(>= 1200px)

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

add a comment |

Extra small devices ~ Phones (< 768px)

Small devices ~ Tablets (>= 768px)

Medium devices ~ Desktops (>= 992px)

Large devices ~ Desktops
(>= 1200px)

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

add a comment |

Extra small devices ~ Phones (< 768px)

Small devices ~ Tablets (>= 768px)

Medium devices ~ Desktops (>= 992px)

Large devices ~ Desktops
(>= 1200px)

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

Extra small devices ~ Phones (< 768px)

Small devices ~ Tablets (>= 768px)

Medium devices ~ Desktops (>= 992px)

Large devices ~ Desktops
(>= 1200px)

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

edited Jan 12 at 22:30

Bishop

2,30811524

edited Jan 12 at 22:30

Bishop

2,30811524

edited Jan 12 at 22:30

Bishop

2,30811524

answered Dec 11 '17 at 19:06

bekzat

214

answered Dec 11 '17 at 19:06

bekzat

214

answered Dec 11 '17 at 19:06

bekzat

214

add a comment |

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">

<link href="justForFrint.css" rel="stylesheet" media="print">

<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

answered Jan 13 at 19:54

Juanma Menendez

19619

add a comment |

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">

<link href="justForFrint.css" rel="stylesheet" media="print">

<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

answered Jan 13 at 19:54

Juanma Menendez

19619

add a comment |

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">

<link href="justForFrint.css" rel="stylesheet" media="print">

<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

answered Jan 13 at 19:54

Juanma Menendez

19619

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">

<link href="justForFrint.css" rel="stylesheet" media="print">

<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

answered Jan 13 at 19:54

Juanma Menendez

19619

answered Jan 13 at 19:54

Juanma Menendez

19619

answered Jan 13 at 19:54

Juanma Menendez

19619

answered Jan 13 at 19:54

Juanma Menendez

19619

add a comment |

-1

@media (max-width: 767px)   {



      .container{width:100%} *{color:green;}-Mobile



    }





    @media (min-width: 768px)  {



     .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 768px) and (orientation:portrait)  {



       .container{width:100%} *{color:yellow  } -Mobile



    }

    @media (min-width: 1024px)  {



       .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 1200px)  {



    .container{width:1180px} *{color:pink   } -Desktop



    }

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

add a comment |

-1

@media (max-width: 767px)   {



      .container{width:100%} *{color:green;}-Mobile



    }





    @media (min-width: 768px)  {



     .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 768px) and (orientation:portrait)  {



       .container{width:100%} *{color:yellow  } -Mobile



    }

    @media (min-width: 1024px)  {



       .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 1200px)  {



    .container{width:1180px} *{color:pink   } -Desktop



    }

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

add a comment |

-1

@media (max-width: 767px)   {



      .container{width:100%} *{color:green;}-Mobile



    }





    @media (min-width: 768px)  {



     .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 768px) and (orientation:portrait)  {



       .container{width:100%} *{color:yellow  } -Mobile



    }

    @media (min-width: 1024px)  {



       .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 1200px)  {



    .container{width:1180px} *{color:pink   } -Desktop



    }

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

@media (max-width: 767px)   {



      .container{width:100%} *{color:green;}-Mobile



    }





    @media (min-width: 768px)  {



     .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 768px) and (orientation:portrait)  {



       .container{width:100%} *{color:yellow  } -Mobile



    }

    @media (min-width: 1024px)  {



       .container{width:100%} *{color:pink  } -Desktop



    }

    @media (min-width: 1200px)  {



    .container{width:1180px} *{color:pink   } -Desktop



    }

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

edited Sep 14 '18 at 12:03

answered Sep 14 '18 at 11:38

Shailesh

285120

answered Sep 14 '18 at 11:38

Shailesh

285120

answered Sep 14 '18 at 11:38

Shailesh

285120

add a comment |

protected by Hashem Qolami Mar 27 '15 at 14:48

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk