CSS媒体查询以纵向和横向模式显示某些内容

Question

我在页面上有一个div，我不想为iphone 5显示（纵向宽度为374px或更低）。但如果我旋转到横向，则会显示div。 如何编写一个媒体查询，如果屏幕在纵向模式下的最大宽度为374px，那么在lanscape模式下也应用css？

Answer 1

iphone 5的横向宽度为568像素，因此您可以将此信息用于orientation和max-device-width，如下所示：

@media screen and (max-width: 374px), 
       screen 
       and (max-device-width: 568px) 
       and (orientation: landscape) {

    /* styles here for iphone 5 landscape + any screen below 374px */
    .hide-content-iphone5 {
      display: none;
    }
}

媒体查询中的逗号表示“或” - 因此它捕获的屏幕小于374像素或最大设备宽度为568像素并且处于横向方向。