Media queries: the abc of them

To target webkit (safari and chrome only) browsers:

@media screen and (-webkit-min-device-pixel-ratio:0) {

Just be careful as it is a hack!  -webkit-min-device-pixel-ratio was meant to tell you the pixel ratio of your screen, meant to discover if you were dealing with a retina display (:2). It just work because other browsers ignore it (for now), and it is true in most screens (because of the current lack of retina displays)

To target ipad / safari portrait / landscape mode:
@media only screen and (device-width: 768px) and (orientation:landscape){}

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

Here are all the available options:
width: The viewport width.
height: The viewport height.
device-width: The rendering surface’s width (for our purposes, this is typically the screen width of a device).
device-height: The rendering surface’s height (for our purposes, this is typically the screen height of a device).
orientation: This capability checks whether a device is portrait or landscape in orientation.
aspect-ratio: The ratio of width to height based upon the viewport width and height.
A 16:9 widescreen display can be written as aspect-ratio: 16/9.
device-aspect-ratio: This capability is similar to aspect-ratio but is based upon the width and height of the device rendering surface, rather than viewport.
color: The number of bits per color component. For example, min-color: 16 will check that the device has 16-bit color.
color-index: The number of entries in the color lookup table of the device. Values must be numbers and cannot be negative.monochrome: This capability tests how many bits per pixel are in a monochrome frame buffer. The value would be a number (integer), for example monochrome: 2, and cannot be negative.
resolution: This capability can be used to test screen or print resolution; for example, min-resolution: 300dpi. It can also accept measurements in dots per centimetre; for example, min-resolution: 118dpcm.scan: This can be either progressive or interlace features largely particular to TVs. For example, a 720p HD TV (the p part of 720p indicates “progressive”) could be targeted with scan: progressive whilst a 1080i HD TV (the i part of 1080i indicates “interlaced”) could be targeted with scan: interlace.
grid: This capability indicates whether or not the device is grid or bitmap based.

All the above features, with the exception of scan and grid, can be prefixed with min or max to create ranges.

If you need to implement media queries in IE8- and browsers that don’t support it, you can do:
https://github.com/scottjehl/Respond

Media queries for all (screens), not only ipad:

@media screen and (min-width: 1000px) and (max-width: 1040px){

// Targeting widths between 1000px and 1040px

}

/* Generic media queries */

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

}
@media screen and ( min-width: 801px ) and ( max-width: 1024px ) {

}
@media screen and ( min-width: 1025px ) {

}

Media queries specific for certain mobile devices:

/** iphone **/
@media screen and (-webkit-max-device-pixel-ratio : 1.5) and (max-device-width: 480px){
}
/** iphone 4 **/
@media screen and (-webkit-min-device-pixel-ratio:2) {
}
/** ipad **/
@media screen and (min-device-width: 768px){
}

Target IE9 and IE10:

@media screen and (min-width:0) {
    body { background: yellow; }
}

Leave a Reply

Your email address will not be published. Required fields are marked *