Question

我正在制作一个网站，顶部有一个徽标。一切正常，直到我在较小的屏幕（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的媒体查询（根据评论和回答），但没有任何改变。我做错了什么？

Answer 1

向CSS添加媒体查询，以便在窗口缩小时正文将与顶部对齐。目前，您的function objectifier(arr) { var obj = {}; obj.name = []; for (var i = 0; i < arr.length; i++) { console.log(arr[i][0]) obj.name.push(arr[i][0]); } return obj; }正在居中对齐，导致顶部被削减。

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

body

Answer 2

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

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

2 个答案: