区分媒体查询中的纵向和横向版本
Differentiating portrait and landscape versions in media queries
我已经设置了这些媒体查询。但是我如何编辑它以便为纵向、横向版本设置单独的媒体查询(例如:iPad、iPhone)?
@media only screen and (min-width : 1824px) {}
@media only screen and (min-width: 1200px) and (max-width: 1823px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 480px) {}
@media only screen and ( orientation: portrait ) {}
@media only screen and ( orientation: landscape) {}
我想这就是你要找的。
编辑:
我认为 适合我的 css 你的意思是:
@media (max-width: whatever) and (orientation: landscape) {}
如果您要求建议何时使用 portrait
或 landscape
,则当视口宽度更大时使用 landscape
,反之亦然。
max-width: 1024px
将设置上限并且不会干扰范围规则:1200px-1823px。
我们必须将 orientation: portrait
和 orientation: landscape
添加到您的媒体屏幕。
iPad Landscape and Portrait
/* iPad Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* iPad Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.
我已经设置了这些媒体查询。但是我如何编辑它以便为纵向、横向版本设置单独的媒体查询(例如:iPad、iPhone)?
@media only screen and (min-width : 1824px) {}
@media only screen and (min-width: 1200px) and (max-width: 1823px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 480px) {}
@media only screen and ( orientation: portrait ) {}
@media only screen and ( orientation: landscape) {}
我想这就是你要找的。
编辑:
我认为 适合我的 css 你的意思是:
@media (max-width: whatever) and (orientation: landscape) {}
如果您要求建议何时使用 portrait
或 landscape
,则当视口宽度更大时使用 landscape
,反之亦然。
max-width: 1024px
将设置上限并且不会干扰范围规则:1200px-1823px。
我们必须将 orientation: portrait
和 orientation: landscape
添加到您的媒体屏幕。
iPad Landscape and Portrait
/* iPad Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* iPad Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.