Showing posts with label css media queries sizes. Show all posts
Showing posts with label css media queries sizes. Show all posts

Wednesday, 3 May 2017

CSS media queries sizes

/* Shared/Common */
@media only screen
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

@media only screen
and (orientation:portrait)
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

@media only screen
and (orientation:landscape)
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

/* Galaxy S5 */
@media only screen
and (max-width: 360px)
and (max-height: 640px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (max-height: 360px)
and (max-width: 640px)
and (orientation:landscape){
  p {    }
}

/* Nexus 5x */
@media only screen
and (min-width: 361px)
and (max-width: 411px)
and (min-height: 641px)
and (max-height: 731px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (min-height: 361px)
and (max-height: 411px)
and (min-width: 641px)
and (max-width: 731px)
and (orientation:landscape){
   p {    }
}

/* Nexus 6p */
@media only screen
and (min-width: 412px)
and (max-width: 435px)
and (min-height: 732px)
and (max-height: 773px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 412px)
and (max-height: 435px)
and (min-width: 732px)
and (max-width: 773px)
and (orientation:landscape){
   p {    }
}

/* iPhone 5 */
@media only screen
and (max-width: 320px)
and (max-height: 568px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (max-height: 320px)
and (max-width: 568px)
and (orientation:landscape){
    p {    }
}

/* iPhone 6 */
@media only screen
and (min-width: 321px)
and (max-width: 375px)
and (min-height: 569px)
and (max-height: 667px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 321px)
and (max-height: 375px)
and (min-width: 569px)
and (max-width: 667px)
and (orientation:landscape){
    p {    }
}

/* iPhone 6 Plus*/
@media only screen
and (min-width: 376px)
and (max-width: 414px)
and (min-height: 668px)
and (max-height: 736px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 376px)
and (max-height: 414px)
and (min-width: 668px)
and (max-width: 736px)
and (orientation:landscape){
    p {    }
}

/* iPad*/
@media only screen
and (min-width: 750px)
and (max-width: 768px)
and (min-height: 1000px)
and (max-height: 1024px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (min-height: 750px)
and (max-height: 768px)
and (min-width: 1000px)
and (max-width: 1024px)
and (orientation:landscape){
    p {    }
}