2

我正在开发一个使用响应式图像和几个固定侧边栏的网站（第一次尝试响应式设计）。问题：响应式图像在 Chrome 中按预期工作，但在 Firefox 中根本不工作。以下是相关页面的示例：

http://ellenflaherty.com/projects/carland/

知道为什么会出现差异吗？

注意：当浏览器超过 1000 像素时，响应式图像不起作用。当针对平板电脑/手机大小的屏幕进行调整时，它们实际上正在按预期工作。

4

2 回答 2

1

我已经看过了，就 Firefox 而言，我建议您删除 display: inline-block 和 float: left; 当您的浏览器窗口到达时重新调整为更大的屏幕尺寸，例如您在问题中提到的 1000px，然后对于较小的屏幕尺寸，您可以重新引入显示和浮动以确保页面显示正常。

我在代码下方附加了一张图片，说明在大屏幕上移除显示和浮动后的外观。

.projectimg {
    bottom: 0;
    /* display: inline-block;  REMOVE THIS */
    /* float: left; /* REMOVE THIS */
    height: auto;
    margin-left: 220px;
    margin-right: 30px;
    overflow: hidden;
    width: 80%; /* THIS */
}

在大屏幕上删除浮动和显示后页面的 Firefox 屏幕。

希望有帮助

于 2012-11-17T04:44:06.940 回答
1

在 HTML 的标头中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">。这将有助于根据屏幕大小调整页面大小。

于 2016-06-28T05:28:21.380 回答