Question

当屏幕在横向模式下旋转，背景颜色未更改且表单溢出时，针对小型设备的CSS媒体查询不适用于Android。

该网站运行良好，关闭了屏幕旋转功能后，我不知道为什么会这样，因为IOS中没有问题，只有Android。

CSS代码：

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 549px) {
  .houseImg {
    display: none;
  }
  .container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #f1f1f1e0;
    height: 386px;
    width: 278px;
    border-radius: 9px;
    margin: auto;
    margin-top: 4rem;
  }
  .brand {
    display: block;
    margin: auto;
    width: 29%;
    padding-top: 28px;
  }
  .brandName {
    font-family: 'Source Serif Pro', serif;
    display: block;
    text-align: center;
    font-size: 19px;
    color: #0060a3;
    letter-spacing: 0.4px;
    margin: 0;
    margin-top: 7px;
  }
  .usrTxtField {
    background-color: #f1f1f1e0;
    width: 237px;
    height: 31px;
    border: 1px solid #8c8b8b;
    border-radius: 7px;
    font-size: 16px;
    padding-left: 8px;
    font-family: 'Maven Pro', sans-serif;
    color: #252525;
    transition: none;
    display: block;
    margin: auto;
  }
  .usrTxtField:focus {
    border: 2px solid #3d79a2;
  }
  .usr {
    margin-left: 20px;
    margin-bottom: 4px;
    margin-top: 20px;
    font-family: 'Maven Pro', sans-serif;
    font-size: 12.5px;
    color: #5a5a5a;
  }
  .submitLogIn {
    background-color: #0060a3;
    border: none;
    display: block;
    margin: auto;
    text-align: center;
    height: 40px;
    width: 125px;
    margin-top: 17px;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.4px;
    font-family: 'Maven Pro', sans-serif;
    cursor: pointer;
  }
  .checkboxSave {
    margin-left: 20px;
    margin-top: 10px;
  }
  .saveText {
    font-family: 'Maven Pro', sans-serif;
    color: #5a5a5a;
    font-size: 12px;
  }
  .forgotPassword {
    font-family: 'Maven Pro', sans-serif;
    color: #0060a3;
    font-size: 12px;
    text-decoration: none;
    margin-left: 18px;
  }
}

HTML代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Art</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="gridContainer">
      <div class="container">
        <a href="index.html"><img src="img/artLogo.png" class="brand"></a>
        <p class="brandName">ART PS GROUP</p>
        <form autocomplete="off">
          <p class="usr">Username</p>
          <input type="text" name="usrTxt" class="usrTxtField">
          <p class="usr">Password</p>
          <input type="password" name="password" class="usrTxtField">
          <input type="submit" name="submit" value="Log In" class="submitLogIn">
          <input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span><a href="#" class="forgotPassword">Forgot Your Password?</a>
        </form>
      </div>
      <div class="container2">
        <img src="img/birdHouse.jpg" class="houseImg">
      </div>
    </div>
  </body>

</html>

Answer 1

仅通过一个媒体查询就不可能完成响应式设计。要正确地进行响应式设计，请访问并检查此site，其中解释了媒体查询，并提供了示例。使用方法。

Android手机和 iOS手机不一定使用相同的宽度和高度，大多数iOS手机使用width: 375px和height: 667px（或width: 667px和height: 375px处于横向模式时），尽管仅适用于iPhone 6/7/8（Plus和其他型号除外），但您可以在Chrome / Mozzila Firefox / etc中检查哪部手机使用的宽度/高度。在开发人员模式下模拟移动设备。

Answer 2

为DOM元素提供固定宽度可能会使小型设备中的视图混乱。特别是当给定的宽度不可用时，因为设备的宽度小于该宽度。

因此，在为较小的设备（例如手机）编写媒体查询时，如果将所有固定宽度都替换为百分比，那就太好了。这样它们就不会从可用空间溢出，并保持在设备宽度之内。

如果您遇到的风景特有问题，可以使用媒体查询和方向组合来解决。

@media all and (max-width: 768px) and (orientation: landscape) {
}

上面的代码足以用于横向使用的小型设备编写规则。

Answer 3

发生这种情况是因为您的android设备屏幕的高度大于549px（考虑到您的媒体查询规范）。自然在横向模式下，此高度变为设备宽度，因此您的媒体查询将被忽略。

这是您几乎可以针对所有手机定位的媒体查询

color=~Variable as mentioned in the answer! BUT why? I set it in my data frame as

为什么CSS无法在Android上正常工作？

3 个答案: