html - 如何将 3 个框居中以匹配屏幕分辨率？

Question

目前我的网站上有 3 个文本框，但它们只能在 1920x1080 上正确缩放

.border {
  width: 320px;
  padding: 10px;
  border: 3px solid black;
  margin-left: 450px;
  display: inline-block;
}

.border2 {
  width: 320px;
  padding: 10px;
  border: 3px solid black;
  margin-left: 20px;
  display: inline-block;
}

我如何才能正确缩放它们，以便它们将所有 3 个都集中在不同的分辨率上并堆叠在移动 9:16 分辨率上？

完整的 HTML/CSS https://pastebin.com/wtiVngjz

Answer 1

看看这个，使用 Flexbox，您可以轻松地将容器内的元素按行或列对齐，这样您就可以避免不必要和困惑的边距以及媒体查询中的一些更改。

您可以阅读有关 Flexbox 的更多信息 Here

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

.box-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.border,
.border2 {
  flex: 0 0 320px;
  padding: 10px;
  border: 3px solid black;
}

.box-container>div:nth-child(2) {
  margin: 0 10px;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
  .maintext {
    font-family: 'Roboto', sans-serif;
  }
  .box-container>div:nth-child(2) {
    margin: 0;
  }
}

<div class="header">
  <img src="switchicon.ico" width=2.5% height=5%>
  <a href="#default" class="logo">keyBoard</a>

  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#FAQ">FAQ</a>
    <a href="#news">News</a>
    <a href="#contacts">Contact Us</a>
  </div>

</div>

<div style="padding-left:20px">
  <h1>Example Header</h1>
  <p>Lorem Ipsum</p>
  <p>Insert Content Here</p>
</div>

<!--MAIN TEXT BOXES-->


<div class="box-container">
  <div class="border" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <!-- ^ LEFT TEXT BOX ^ -->

  <div class="border2" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div class="border2" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>