html - 横向和纵向媒体查询之间的区别

我坐在这页上阅读

Media Query

它在这里说：


  
    / * iPads（横向）----------- / @仅媒体屏幕和（最小设备宽度：768像素）和（最大设备宽度：1024像素）和
    （方向：风景）{/样式* /}
  
  
  / * iPad（纵向）----------- / @media only屏幕和
  （最小设备宽度：768像素）和（最大设备宽度：1024像素）和
  （方向：纵向）{/样式* /}


但是，这两个代码没有区别吗？结果导致我使我的元素适合fx横向模式。然后我进入人像模式，一切都在飞来飞去。

如何设计感应模式，以便将人像和风景模式分开？

的CSS

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

    .ebook-image {
    width: 600px;
    display: block;
    margin: 0 auto;
    margin-top: -30px;
    }

    .ebook-image img {
        margin-left: 0px;
    }

    .header-box {
        background-color: #163A4E;
        height: 680px;
        margin-bottom: 0px;
        padding: 0px;
    }

    .header-text h1 {
        font-weight: 900;
        font-size: 40px;
        line-height: 1;
        text-transform: uppercase;
        color: #fff;
        position: relative;
        left: 0px;
        top: -10px;

    }

    .header-text h2 {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 900;
        color: #fff;
        position: relative;
        left: 0px;
        top: -30px;
        text-align: center;
    }

}

 iPads (landscape) -----------
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .ebook-image {
        height: 500px;
        width: 590px;

    }

    .ebook-image img {
        margin-left: -190px;
        padding-top: 0px;

    }
    .header-box {
        background-color: #163A4E;
        height: 350px;
        margin-bottom: 0px;
        padding: 0px;
    }

    .header-text h1 {
        font-weight: 900;
        font-size: 40px;
        line-height: 1;
        text-transform: uppercase;
        color: #fff;
        position: absolute;
        left: -400px;
        top: 110px;

    }

    .header-text h2 {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 900;
        color: #fff;
        position: absolute;
        left: -405px;
        top: 150px;

    }
}

最佳答案

查询是完全不同的。请注意两个媒体查询中的尾随and (orientation : landscape)和and (orientation : portrait)。

这是一个小提琴，通过在横向或纵向模式下查看时应用不同的背景色来演示这些查询。
https://jsfiddle.net/dem49e87/2/show/

确保在手机上打开它，然后以纵向和横向模式将其签出。

关于html - 横向和纵向媒体查询之间的区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39139534/