Css media queries for different devices (Mobile & tablet)

CSS3 Media Queries For All Devices And Browsers | CSS Media Queries for Standard Devices


528
106 shares, 528 points
  1. 1 Iphones 4 and 4s Portrait and Landscape

    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) { }

  2. 2 Iphone 5 and 5s Portrait and Landscape

    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2) { }

  3. 3 Iphone 6 Portrait and Landscape

    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) { }

  4. 4 Iphone 6+ Portrait and Landscape

    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3) { }  

  5. 5 Other Mobile Phone Portrait and Landscape

    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) { } AND  @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) { }

  6. 6 Ipad Portrait and Landscape

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) { }

  7. 7 Galaxy Tab Portrait and Landscape

    @media
    (min-device-width: 800px)
    and (max-device-width: 1280px) { }

  8. 8 Laptop Portrait and Landscape

    @media screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1) {
    }


Like it? Share with your friends!

528
106 shares, 528 points
Anonymous

Anonymity gives you the power of being invisible. The aim is to summarize the whole internet.

Comments

comments

0 Comments

Your email address will not be published. Required fields are marked *