本文介绍了在媒体查询中区分纵向和横向版本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经设置了这些媒体查询.但是,我该如何对其进行编辑以针对纵向和横向版本(例如:iPad,iPhone)设置单独的媒体查询?
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: 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) {}
推荐答案
我们必须在您的媒体屏幕上添加orientation: portrait
和orientation: landscape
.
We have to add orientation: portrait
and orientation: landscape
to your media screen.
/* 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) {
}
-webkit-min-device-pixel-ratio: 2
这篇关于在媒体查询中区分纵向和横向版本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!