响应式设计问题：忽略最大宽度的媒体查询 [关闭]

Question

目标

对于宽度小于 600 像素的屏幕尺寸，我希望我的页面内容适应屏幕。

问题

当在 Chrome 的响应式工具中使用预设的屏幕尺寸时，假设 iPhone X 媒体查询似乎没有被应用，因为内容没有调整。手动使用响应式工具时，即通过最小化/扩展响应式屏幕媒体查询仍然不起作用。

在 Firefox 上，选择预设屏幕尺寸时也会发生同样的情况。但是，当手动更改响应式工具的屏幕大小时，媒体查询确实可以工作，因为内容大小会根据屏幕进行调整。

再次在我的手机（iPhone 7 Plus）上测试我的实际网站时，由于内容未调整，媒体查询不起作用。

在我的实际项目中，我使用 SCSS 作为预处理器并使用 mixins 进行媒体查询。网站的响应能力适用于除登录页面之外的每个页面。我做了一个简单的版本，只在这个问题中使用 CSS。

尝试

body {
  margin: 0;
  padding: 0;
}

html {
  /* 10px/16px = 62.5% -> 1rem = 10px */
  font-size: 62.5%;
}

/* phone screen breakpoint */
@media (max-width: 600px) {
  html {
    /* 1 rem = 7px, 7/16 = 43.75% */
    font-size: 43.75%;
  }
}

.container {
  background: black;

  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.wrapper {
  max-width: 35rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  right: 50%;
  bottom: 50%;
  transform: translate(50%,50%);
  position: absolute;
  padding: 5rem;
}

.wrapper h1 {
  color: black;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 2rem;
}

.wrapper form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper form input {
  width: 100%
  padding: .5rem;
  margin-bottom: 1rem;
}

.footer {
  position: absolute;
  bottom: 0;

  float: left;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.footer ul {
  float: left;
  margin-top: .5rem;
  width: 70vw;
}

.footer li {
  display: inline-block;
  border-right: .1rem solid white;
  padding: 0 1rem;
  margin-bottom: .5rem;
}

.footer li:last-child {
  border-right: none;
}

.footer li a {
  display: inline-block;
  color: white;
  font-size: 1rem;
  font-weight: 500;
}

<div class="container">

    <div class="wrapper">
      <h1>SIGN IN HERE</h1>
      <form>
        <input type="text" placeholder="E-mail">
        <input type="text" placeholder="Password">
        <button>Sign In</button>
      </form>
    </div>

    <div class="footer">
      <div>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Policy</a></li>
        </ul>
      </div>
    </div>

  </div>

Answer 1

您缺少一个分号，导致您的输入无法调整大小：

.wrapper form input {
  width: 100%  /* <- Should have a semicolon here */
  padding: .5rem;
  margin-bottom: 1rem;
}

此外，您的媒体查询正在工作，但是<input> 和其他表单元素的font-size 很棘手，因为它们是don't inherit font-size by default（或其他字体属性）。该答案建议如下：

input, select, textarea, button { font-family: inherit }

但是，如果您愿意，您可以为表单元素单独指定这些。