Cascading Style Sheets (CSS) are one of the important part of web design, without a proper Cascading Style Sheets the website will not become user friendly. In modern design (hand coding and table less) CSS can be used to perform variety of tasks including animation.
When Css2 was introduced web developers have the option for specific media types like screen or print and now with Css3 web developers are able to target specific screen sizes using ‘Media Queries’.
Media Queries are some kind of filters which can be applied to Cascading Style Sheets (CSS), with this we can make a website responsive for many devices like smart phone, tablet, desktop monitor etc.
In this post we will share almost standard devices and browsers size and simple skeleton which the developer can use as a frame work in their web projects.
/* ---------------------------------------------------------------------- */ /* Media Queries skeleton framework - Vishmax.com /* ---------------------------------------------------------------------- */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* 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) { } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ } /* 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){ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ } /* 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){ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ } /* 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){ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ } |