1

我正在构建我的第一个响应式主题，这是我遇到的两个问题中的第二个。

如果你去http://digitaldemo.net/landmark/并向下看底部，有一个水平的图像列表，编码如下：

<ul>
<li>image 1</li>
<li>image 2</li>
<li>image 3</li>
<li>image 4</li>
<li>image 5</li>
</ul>

在 480px res 或更小的屏幕上，列表变为 3 张图片而不是 5 张，但我也希望像标头图片一样调整图片大小。我能够通过添加来调整标头图像的大小，max-width:100%但这不适用于此图像列表。

任何帮助，将不胜感激！

谢谢，

辛西娅

4

1 回答 1

2

首先，通过在两种不同尺寸上显示和隐藏基本相同的元素，我认为你从一个完全错误的角度来解决问题：从可用性的角度来看（如果有屏幕阅读器的用户访问你的网站怎么办？） ，从编码标准的角度来看（臃肿的代码，难以维护，干燥）和从SEO的角度来看（重复的内容？关键字填充？）。

其次，你有两个不同的元素使用相同的id. 这不应该发生：s 必须是唯一的。id

第三，解决您的问题：为了通过 CSS 动态调整图像大小，您必须通过 percent设置其尺寸。在您的情况下，我会将 CSS 设置为如下所示：

#scroll.mobile ul {
    width: 100%;
}

#scroll.mobile li {
    width: 33%; /* You wanted three images per row, right? */
}

#scroll.mobile li img {
    max-width: 100%;
}

这样，您的列表元素将占据整个窗口空间，每个列表项仅占其中的三分之一，并且包含的​​图像将被限制在窗口的三分之一。

于 2013-04-19T10:42:07.210 回答