如何在css中设置纵向和横向媒体查询？
如何在css中设置纵向和横向媒体查询？
提问于 2014-11-11 17:09:39
以下是我的媒体查询：
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
} 但在平板电脑中，如果它处于横向模式，则此div将显示
.visible-tablet {
display: inherit !important;
}如果它处于纵向模式，则显示此div
.visible-phone {
display: inherit !important;
}我希望每当我将平板电脑切换到自动旋转模式(这将用于纵向和横向)时，始终显示此div .visible-tablet。
但是我使用了肖像和风景条件，但我仍然面临着这个问题。有什么意见吗？
回答 1
Stack Overflow用户
发布于 2017-12-13 20:47:20
它可以像这样简单。
@media (orientation: landscape) {
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26861189
复制相关文章
相似问题