/* 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 { }
}
Only4programmers site only for web development and stand alone program learners its very use full to see the code for both web and windows applications.
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
Subscribe to:
Posts (Atom)