css - 使用电话宽度和保持纵横比创建项目的响应式 Flex 布局

Question

希望从那里的 CSS flex 大师那里得到一些帮助。

1. 我有一个 4:3 纵横比项目的 n 计数列表，它应该布局并占据页面的整个宽度。
2. 当页面水平调整大小时，项目网格应该换行。
3. 在电话上，所有项目都应该是一列，其宽度等于电话减去一点填充。

我有这个非常接近：https ://codepen.io/kirkouimet/pen/gOLrmvL

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

li {
    margin: 32px;
    width: 400px;
    height: 300px;
    
    list-style-type: none;
    border-radius: 12px;
    background: #CCC;
}

我遇到的问题是#3。有些手机的宽度比其他手机小，所以我无法设置固定宽度的像素大小。设置固定宽度的像素大小也是一个问题，因为我需要保持 4:3 的纵横比。这些项目还需要具有最大宽度，以便它们在桌面上看起来不错......

有人对我如何解决这个问题有想法吗？我认为 flex 和 flex wrapping 是要走的路。如果可能的话，我也想避免使用 JavaScript。

标签： cssflexbox

Answer 1

您可以在 CSS 中使用calc()and来执行此操作。media-queries

@media only screen and (max-width: 550px) {
  body {
    background-color: #ffe897;
  }
  li {
    width: calc(100vw - 64px);
    height: calc(75vw - 64px);
  }
}

此处media-query仅当设备宽度小于或等于时才有效550px。您可以根据需要更改它。

background-color给出tobody只是为了查看何时开始media-query工作。完成后可以将其删除media-query。

现在是实际的部分：

我们已分配width给calc(100vw - 64px). 我们可以在里面进行所有类型的计算calc()。这里100vw表示 100% 的视口或屏幕宽度。我们说将宽度设置100%为divide width减号64px，即margin左右32px两侧的。

同样，高度表示75%设备的减号64px margin。

在 Codepen 编辑器上检查它：https ://codepen.io/manaskhandelwal1/pen/OJbNpqx?editors=1100

在 Codepen 调试模式下检查它：https ://cdpn.io/manaskhandelwal1/debug/OJbNpqx/XxkVwKaqOJxM

---

要查看浏览器计算的宽度和高度，您可以使用浏览器开发人员工具。

打开开发人员工具并将选项卡更改Styles为Computed.

您可以看到值随着屏幕宽度的变化而变化。