填充底部黑客在移动设备上不起作用

Question

我目前正在研究一个底部填充技巧，以防止内容重排，它在桌面上完美运行。

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

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

在 CSS 中;

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

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

这里

Answer 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 中为您的桌面样式调用该 ID，然后使用 @media 选择该 ID 并在移动设备上对其进行修改。

您将能够通过调整浏览器大小来测试它。您可能还想研究 flexbox，它是此类事情的救星，您可以在媒体查询内部和外部编写 CSS 以用于特定大小的代码。

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