以下是我的媒体查询:
@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
。
但是我使用了肖像和风景条件,但我仍然面临着这个问题。有什么意见吗?
https://stackoverflow.com/questions/26861189
复制相似问题