Question

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

我使用自己的HTML和CSS代码创建了许多页面，并且它们在计算机，每个浏览器和显示大小上看起来非常好。但主题的自动移动视图显示所有自编码的东西。

例如：我想并排显示一些图片，所以我使用了这样的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>

图片会在每台桌面设备上并排显示，但遗憾的是在移动设备上无法显示。

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

我真的被困在这里，因为网站已完成编码，并且在计算机上，在任何显示尺寸等方面看起来都非常好。只有移动视图才是问题所在。

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

谢谢！

Answer 1

Mystile主题是一个响应主题，并有一个所谓的“视口”元素，以确保所呈现的大小是该设备的最佳选择：

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

您用于图像的定位不会响应设备宽度，因为您使用的是绝对定位（在您的情况下：第一张图像是左：0px，第二张图片是左：250px，第三张是左：500px）。

总的来说，绝对定位被认为是不好的做法（如果你尝试回应的话），我建议的解决方案是制作图像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>

Wordpress / HTML代码：图片无法在移动视图中正常显示

1 个答案: