填充底部黑客无法在移动设备上运行

【问题标题】：Padding bottom hack not working on mobile填充底部黑客无法在移动设备上运行
【发布时间】：2020-01-24 17:32:06
【问题描述】：

我目前正在研究一种底部填充黑客来防止内容重排，它在桌面上运行完美。

我有一个类似于以下内容的 div；

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

在 CSS 中；

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

但在移动设备上，图像如下所示，它是缩放的，并且图像和下面的文本之间存在很大的差距.. 见图片here

【问题讨论】：

【解决方案1】：

尝试摆脱内联样式并只使用 CSS 样式。您可以使用媒体查询来设置移动视图的参数，这将允许您设置 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 以获取特定于大小的代码。

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

【讨论】：