Css media queries for different devices (Mobile & tablet)

CSS3 Media Queries For All Devices And Browsers | CSS Media Queries for Standard Devices
Css-media-queries-for-different-devices-Mobile-tablet
  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. 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. 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. 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) { }  (See Why is the iPhone so expensive?)

  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. Ipad Portrait and Landscape

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) { } (See Why Apple has very high quality standards?)

  7. Galaxy Tab Portrait and Landscape

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

  8. Laptop Portrait and Landscape

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

Total
0
Shares
Leave a Reply

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