html - WordPress/HTML 代码 : Pictures don't get displayed properly on mobile view

Question

我有一个基于 wordpress 的在线商店，主题是“Mystile”。

我用自己的 HTML 和 CSS 代码创建了许多页面，它们在计算机上、各种浏览器和显示尺寸下看起来都非常好。但是主题的自动移动 View 显示所有自编码的东西非常糟糕。

例如:我想并排显示一些图片，所以我使用了这样的 HTML 代码:

<div style="position: absolute;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 250px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 500px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>

图片在每个桌面设备上并排显示，但遗憾的是在移动设备上显示不准确。

在其他主题的移动 View 中，您肯定会注意到定义的 View 宽度，因此我的图片以适合移动 View 的方式显示。在我当前的主题中，情况并非如此，移动 View 似乎只是整个网站的一种转换，而不是显示内容的明确定义的框。

我真的坚持在这里，因为该网站已完成编码，并且在计算机上、任何显示器尺寸等上看起来都非常好。只有移动 View 才是问题所在。

我能做什么，应该做什么？

谢谢!

Answer 1

Mystile 主题是一个响应式主题，并有一个所谓的“视口(viewport)”元以确保呈现的尺寸最适合设备:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

您为图像使用的定位不响应设备宽度，因为您使用的是绝对定位(在您的情况下:第一张图片左边:0px，第二张图片左边:250px，第三张是左:500 像素)。

总的来说，绝对定位被认为是不好的做法(如果你尝试响应式的东西)，我建议的解决方案是制作图像 inline-block 并在它们不再适合时缩小它们。通过这种方式，您可以在大屏幕上获得想要的内容，如果屏幕变小，所有内容都会缩小。

.wrap {
    font-size: 0px;
    margin: 0;
    padding: 0;
}
.singleimage {
    display: inline-block;
    max-width: 33.3%;
}
.scaleimage {
    width: 100%;
}

    <div class="wrap">
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
    </div>