/* 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.
Wednesday, 3 May 2017
CSS media queries sizes
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment