html - 填充底部 hack 不适用于移动设备

Question

我目前正在研究底部填充黑客攻击以防止内容回流，它在桌面上运行完美。

我有一个 div，它有如下内容；

<div style="--imageWidth: 300; --imageHeight: 200;"></div>

在 CSS 中；

div {
  border: 3px dashed magenta;
  padding-bottom: calc(var(--imageHeight) / var(--imageWidth) * 100%)}

但是在移动设备上，图像看起来像下面这样，它在缩放并且下面的图像和文本之间有很大的差距。参见图像 here

Answer 1

尝试摆脱内联样式并只使用 CSS 样式。您可以使用媒体查询来设置移动 View 的参数，这将允许您设计 2 个版本的 CSS，一个用于桌面(您的 CSS)，一个用于移动设备(您的 CSS 中的媒体查询)。

以下代码将产生蓝色背景，但在移动设备上为绿色。

/*CSS*/
body {
  background-color: blue;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

使用相同的逻辑为您的 <DIV> 编写特定代码.为它添加一个 id 并在 css 中为您的桌面样式调用它，然后使用@media 选择该 id 并在移动设备上修改它。

您可以通过调整浏览器大小来测试它。您可能还想查看 flexbox，它是此类事物的救命稻草，您可以在媒体查询的内部和外部编写 CSS 以获取特定大小的代码。

希望这能回答您的问题。让我们知道您发现了什么!