Question

我正在尝试制作一个响应全屏电脑尺寸以及手机上的纵向和横向尺寸的应用程序。我可以使用全屏和纵向调整来工作，但是当我切换到横向时，横向css媒体查询不起作用。关于发生了什么的任何想法？这是我的css：

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) {
      .landing-header {
          margin-top: 18%;
      }
      .landing-h {
          font-size: 145px;
      }
      .auth-box {
            position: absolute;
            top: 58%;
            left: 35%;
            margin-left: -15rem;
            margin-top: -26.5rem;
            width: 60rem;
            height: 80rem;
            overflow: hidden;
      }
      .user-auth {
          padding-top: 35%;
      }

      .greeting {
        margin-top: 6%;
        margin-left: 7%;
        font-size: 35px;
        text-align: center;
      }

      .login-form, .register-form {
          font-size: 40px;
      }


      .login-form input, .register-form input {
          margin: 3%;
      }

      .landing-button {
          margin: 2%;
          width: 50%;
          font-size: 60px;
      }
}

@media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
        .landing-header {
            margin-top: 9%;
        }
        .auth-box {
            position: absolute;
            top: 98%;
            left: 35%;
            margin-left: -22rem;
            margin-top: -26.5rem;
            width: 72rem;
            height: 20rem;
            overflow: hidden;
        }
        .greeting {
            margin-left: 34%;
            margin-top: 2%;
            margin-bottom: 1%;
            font-size: 16px;
            text-align: center;
}
    }
      .user-auth {
        padding-top: 9%;
    }
    .landing-button {
        margin: 0%;
        width: 12%;
        font-size: 16px;
}
    .login-form, .register-form {
          font-size: 18px;
      }
      .login-form input, .register-form input {
          margin: 2%;
      }


@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { 
    .auth-box {
        width: 61rem;
        height: 18rem;
        top: 95%;
        left: 40%;
        height: 23rem;
    }
    .landing-button {
        font-size: 20px;
        width: 18%;
        margin: 1%;
    }
    .greeting {
        margin-left: 30%;
        margin-top: 2%;
    }
    .login-form input, .register-form input {
          margin-top: 6%;
          margin-bottom: 1%;
      }
}

Answer 1

好吧，我想我看到了什么在咬你。除了最大值和最小值与我在评论中指出的相同外，有点违反直觉，你需要使用相同的宽度和宽度。纵向和横向模式的高度值。因此，像iPhone这样的设备的设备宽度总是比其设备高度的值小，因为它的本地＆＃34;方向是肖像。如果您对横向模式的宽度媒体查询与您为肖像模式所获得的相匹配，它可能会做您想要的。

媒体查询格局不起作用

1 个答案: