网页顶部的图像在移动设备上被剪切

Question

我正在制作一个顶部有徽标的网站。一切正常，直到我在较小的屏幕（iPhone 6 或 iPhone SE）上尝试该网站。出于某种原因，顶部的徽标被切断了。我的限制是我希望一切都居中（垂直和水平）。我通过删除 How do I solve this?

暂时找到了解决方案

这是我目前的情况：

html,
body {
  height: 100%;
}

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #fafafa;
  color: #294455;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 375px) {
  body {
    align-items: top;
  }
}

.container {
  text-align: center;
  margin: 2em;
  width: auto;
}

.heading {
  margin-bottom: 2em;
}

.heading img {
  margin: 0;
}

.heading h1 {
  font-size: 4em;
  font-weight: bolder;
  margin: 0;
}

.heading h2 {
  font-size: 1.2em;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sample Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="heading">
            <img src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/image-128.png" alt="GHJobs Subscribe">
            <h1>Sample website</h1>
            <h2>Blah blah blah subtitle.</h2>
        </div>
        <div class="message" hidden></div>
        <div class="spinner" hidden>
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
        <div class="form">
            <form id="subscribeUser">
                <input type="email" class="email" name="email" placeholder="Enter your email address">
                <button type="submit" class="subscribe">Subscribe</button>
            </form>
        </div>
        <div class="strip">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

更新我输入了一个最大宽度为 375px 的媒体查询（根据评论和答案），但没有任何改变。我做错了什么？

Answer 1

您在代码中使用了 align-items: center。浏览器尝试将正文内容垂直和水平居中。所以它不关心内容是否超出视口。您可以通过在某个小到足以成为移动设备的断点处使用 align-items: top 来解决此问题。

Answer 2

向您的 CSS 添加媒体查询，以便在 window 收缩时正文将对齐到顶部。目前，您的 body 居中对齐，导致顶部被切割。

我相信你想要的媒体查询是这样的：

@media screen and (max-width: 375px) {
  body {
    align-items: flex-start;
  }
}

网页顶部的图像在移动设备上被剪切

Image at top of webpage gets cut on mobile

html

css

flexbox

responsive