CSS Media Queries for All Standard Devices and Browsers

The @media rule is used to define different style rule for different media types/devices. In CSS2 , this was called media types for screen or print type media and in CSS3 is called media query for different size devices.

Always apply media queries based on viewport size. View port items used most often for responsive web design are min-width, max-width, min-height and max-height.

CSS media queries are best ways to provide better user experience for different devices by different styles. As part of css3, media queries expand the role of media attribute that controls how styles are applied.

If we talk about browser support for media queries, all browsers IE, Firefox, chrome,safari etc support it but for below IE8 does not support media queries.
CSS MEDIA QUERIES FOR ALL STANDARD DEVICES AND BROWSERS
Following table demonstrates CSS media queries for all browsers in action. They all show the same web page as it’s viewed in a desktop browser, tablet or an iPod touch.

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

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

attribute

Result

min-width

Rules applied for any browser width over the value defined in the query.

max-width

Rules applied for any browser width below the value defined in the query.

min-height

Rules applied for any browser height over the value defined in the query.

max-height

Rules applied for any browser height below the value defined in the query.

orientation=portrait

Rules applied for any browser where the height is greater than or equal to the width.

orientation=landscape

Rules for any browser where the width is greater than the height.

3 Comments

Leave a Reply