Width of Standard Devices Used in css Media Queries.

In last post I have discussed that how to use css media queries to write css for different screen sizes. In this post we will discuss about screen sizes of some commonly used devices. So that will help you to write media queries for each device.

Width of Most commonly used devices is as follows

.
Device Width Height
iPhone 5 320 568
iPhone 3G and 4 320 480
iPad 768 1024
Google Nexus 7 600 905
Samsung Galaxy S2 320 533

Smart phones landscape: Apply css on when screen width is greater than 321px
@media only screen and (min-width : 321px) {
/* css  */
}

Smart phones Portrait: Apply css on when screen width is Less than 320px
@media only screen  and (max-width : 320px) {
/* css  */
}

iPads landscape: In iPads we can check the orientation of the device. So we can mention orientation in the query and the css will apply when the orientation is landscape.
@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* css  */
}

iPads portrait: css will apply when the orientation of device is portrait.
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)  
and (orientation : portrait) {
/* css  */
}

For small devices
@media all and (max-width: 240px) {
 /*  css  */
}

For Standard Desktop
@media all and (min-width: 1024px) and (max-wdth:1366px) {
 /*  css  */
}

For large Screens
@media all and (min-width: 1367px) {
 /*  css  */
}

1 comment:

  1. Casino Slot Machines - Mapyro
    The Casino Slot Machines at Mapyro Casino. Mapyro Casino 김포 출장안마 is 세종특별자치 출장샵 located 전라북도 출장샵 in New Mexico's Upper Peninsula. Casino 부천 출장샵 Slots are 오산 출장안마 some of the most exciting

    ReplyDelete

IF you have any suggestions or any article then write in comments we will contact you.