
In a previous snippet you would of seen a boilerplate for iOS media queries.
Below is a CSS snippet expanding the previous snippet to use media queries on other smartphones.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Pingback: CSS goodness … | fabrik grafik blog
Pingback: 十六个快速启动项目样板 « 博优谷
Pingback: 十六个快速启动项目样板 « My Blog
Pingback: 十六个快速启动项目样板 « 飚哥思想-关注搜索引擎和互联网的IT科技博客
Pingback: 十六个快速启动项目样板 | 侯三儿
Pingback: 十六个快速启动项目样板 « NeverBest!我还能做的更好 – 007boy | im007boy
Pingback: 十六个快速启动项目样板_乌徒帮_网站建设入门教程网_入门者的起义!
Pingback: 十六个快速启动项目样板 | 人肉联播