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.
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 |
---|---|
| Rules applied for any browser width over the value defined in the query. |
| Rules applied for any browser width below the value defined in the query. |
| Rules applied for any browser height over the value defined in the query. |
| Rules applied for any browser height below the value defined in the query. |
| Rules applied for any browser where the height is greater than or equal to the width. |
| Rules for any browser where the width is greater than the height. |
Hey I think i should seek your help please do visit my website and suggest changes required…
Best Viinod
http://www.arkadstv.com
Hi Vinod, i think you should change your theme. Make your website more user friendly. Navigation is must in header.
Apirocpatien for this information is over 9000-thank you!