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

【问题标题】：Image at top of webpage gets cut on mobile网页顶部的图像在移动设备上被剪切
【发布时间】：2017-03-04 04:08:12
【问题描述】：

我正在制作一个顶部有徽标的网站。在我在较小的屏幕（iPhone 6 或 iPhone SE）上尝试该网站之前，一切正常。顶部的标志由于某种原因被切断。我的限制是我希望一切都居中（垂直和水平）。通过删除如何解决这个问题，我可以短暂地找到解决方案？

这是我目前所拥有的：

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 的媒体查询（根据 cmets 和答案），但没有任何改变。我做错了什么？

【问题讨论】：

您在body 中的中心对齐是问题所在，我相信。它希望身体的中心成为窗口的中心，因此，顶部会被修剪。我建议使用 CSS 中的 @media 标记更改垂直对齐方式，以便在窗口达到一定大小时使其顶部对齐。
您可能必须编写媒体查询来处理它在特定屏幕尺寸下的显示方式以及其他情况。
@Santi，检查我的更新。即使添加了媒体查询，似乎也没有任何变化。

标签： html css flexbox responsive

【解决方案1】：

在您的 CSS 中添加一个媒体查询，以便在窗口缩小时正文与顶部对齐。目前，您的 body 正居中对齐，导致顶部被切割。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：