Media Queries For All Devices

Hi

I am developing a responsive website. It should be compatible to all devices(ipad, iphone, tablet, google nexus and all android phones). What are the media queries I should write. I need only media queries.

 

You can make life easier with Bootstrap: http://getbootstrap.com/

 

I prefer the breaking points method, but you can use these media queryes :

/* Smartphones (portrait and landscape) ----------- */
@[USER=124521]media[/USER] only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@[USER=124521]media[/USER] only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@[USER=124521]media[/USER] only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@[USER=124521]media[/USER] only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@[USER=124521]media[/USER] only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@[USER=124521]media[/USER] only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@[USER=124521]media[/USER] only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@[USER=124521]media[/USER] only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@[USER=124521]media[/USER]
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Code (markup):

 

The question itself shows flawed thinking and methodology; just as with scripting you should be thinking on detecting CAPABILITIES, NOT devices... and if you tell the mobile browsers to STOP messing with things like 'device pixel ratios' and to STOP lying about their resolutions (or at least stop lying as much) the ONLY thing you need to think about is at what widths to you NEED to change the layout.

To make the browsers STOP lying, you put this in the markup:

<meta
	name="viewport"
	content="width=device-width; height=device-height; initial-scale=1.0;"
/>

Code (markup):

Apparently Samsung is screwing with their version of the default droid browser so you have to say the height one as well now...

Then this in the CSS:

@[USER=124521]media[/USER] (max-width:480px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

Code (markup):

So they don't try to screw with your default font sizes and you can then design with %/em properly. (the media query around that is to prevent it from being sent to desktop versions of Safari, where it will prevent zoom/shrink from working -- a laugh since it does NOT effect zoom/shrink on mobile Safari...)

From there if you have a semi-fluid elastic layout, it's just a matter of first designing your layout for non-media query desktop browsers... (A lot of people say start with the smallest mobile layout first -- IMHO there are too many people on desktop in pre-CSS3 browsers to give a crappy fixed width stripe too)... You then add queries for larger widths adding columns if need be, and narrower widths stripping off columns when it becomes an issue.

I do NOT consider there to be any specific widths one 'needs' to target, you should target when the layout needs it, NOT BY DEVICE.

Even THINKING about specific devices defeats the point of responsive layout -- automatically adjusting to WHATEVER it's being used on. What are you going to do, rewrite every time another device comes along? Part of the entire reason to target by available width using media queries is future-proofing so you don't HAVE to think "Well what about the iPhone 8 in 2020"

Which is why @Bogdanel -- I'd NEVER use media queries that were that complex a mess... as you said, break points (which I'm assuming you mean according to the layout's needs) are a far better approach... see why generally my break-points are in EM's so it's based on font size, NOT a fixed pixel size that may or may not have anything to do with the size of the content...

But that's just part of why I advocate making a semi-fluid (min/max-width) elastic (em sized with %/em fonts) layout FIRST... something that we've all been told for over a decade to do, yet most people when building websites (even responsive ones) seem to still have their craniums wedged so far up 1997's rectum it takes an orthodontist to handle the extraction!