媒體查詢格局不工作

我正在嘗試製作一個應用程序，該應用程序可以響應全屏計算機大小以及手機上的縱向和橫向大小。我可以獲得全屏和人像尺寸的工作，但是當我切換到橫向時，橫向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%; 
     } 
}

來源

2016-08-19 Lindy Leigh

您是否意識到您的橫向媒體查詢當前具有最小和最大寬度的相同值？如果你不這樣做，這可能是你的問題。 – Feneric

好抓！我改變了最小寬度，但沒有雪茄。即使全尺寸和景觀現在工作肖像不再有效。 –

好吧，我想我看到什麼是咬你。除了最大值和最小值與我在評論中指出的相同之外，與直覺相反，您需要對縱向和橫向模式使用相同寬度的高度值。因此，像iPhone這樣的設備，其設備寬度總是比設備高度小，因爲其「原生」方向是縱向。如果您將橫向模式的寬度媒體查詢與縱向模式相匹配，它可能會按照您的要求進行操作。

來源

2016-08-21 22:06:04 Feneric

媒體查詢格局不工作

回答

相關問題