cssresponsive-designmedia-queriesviewport

Sizes for Responsive website Design


i want to design a web site.but tell me what are the sizes i can use for responsive website design. that sizes must contain for mobile,tablets,pcs and other devices..

i want to use them in media queries.. :D

EX for Mobile:

    @media only screen and (min-width: 500px) {

    } 

EX for Tablet:

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

    } 

Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D

like that i want to know what are the reals sizes for these devices that i can use. :D


Solution

  • /* #1- Desktops */
    @media (min-width: 980px) { ... }
    
    /* #2- Portrait tablet to landscape and netbooks */
    @media (min-width: 768px) and (max-width: 979px) { ... }
    
    /* #3- Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }
    
    /* #4- Landscape phones and down */
    @media (max-width: 480px) { ... }
    

    For actual device specifications, check out this link by CSS-tricks..