响应式设计 - 如何使图像在小屏幕上看起来正常？答案

【问题标题】：responsive design - how to make the images look normal on small screens?响应式设计 - 如何使图像在小屏幕上看起来正常？
【发布时间】：2013-04-13 05:38:17
【问题描述】：

我正在处理这个测试页面： http://problemio.com/index_test.php

在我的笔记本电脑屏幕上看起来不错。但在我的手机浏览器上看起来很糟糕。尤其是图片看起来一团糟。

可以做些什么来确保图像看起来不错？

谢谢，亚历克斯

【问题讨论】：

您需要添加一些代码和/或一个jsfiddle，以便当此链接更改时，此问题仍然具有历史价值

标签： html css responsive-design

【解决方案1】：

Omega 有正确的想法，但您也想设置width 参数。我通常将width 设置为百分比值，将max-width 设置为像素值。这样，一旦它超过了最大宽度，它基本上把它扔到一边，只看宽度。类似的东西

img {
  max-width:500px; /*Once screen size is smaller than 500px, the image reverts to the width value*/
  width:100%;
}

JSFiddle

【讨论】：

感谢您的提及。不过，我可能会错过你的观点。您是说如果图像超过 500 像素，那么它将回退到 100% 的宽度属性？当然只是使用max-width:100% 会做同样的事情吗？默认情况下，除非在其他地方指定，否则图像将以其自然大小显示。
@Omega max-width:100% 将确保图像永远不会跨越浏览器宽度线。您可以使用它，但如果您有一个 1700 像素的屏幕，其中的图像应该是 250x250 的图像，那么该图像将被非常拉伸和扭曲。所以我这样做是为了图像不会突出
因此您使用 height:auto 而不为图像设置任何其他测量属性。如果您指定它的测量值，它只会拉伸和扭曲。否则它将显示的最大值是它的自然大小......不是吗？
高度自动不会做任何事情。这意味着浏览器将计算高度
好吧，让我们暂时忘记自动高度，但是我上面的问题呢？只是在这里探索不同的观点，顺便看看能不能学到新东西。。

【解决方案2】：

使用媒体查询为移动设备设置元素样式。图像使用百分比以及最大宽度和最小宽度值。

@media screen and (max-width:480px) {
    //CSS sizes for mobiles only
}

【讨论】：

谢谢。我对媒体元素有点困惑。所有现代浏览器都只能识别它们吗？还是我必须导入一些 css 库？
IE7 及以下不支持媒体查询
@CodyGuldner 谢谢你——所以如果我创建了一些同名的媒体元素，旧版浏览器如何知道选择哪个元素？
所有移动设备都支持媒体查询，并且它们也是唯一需要支持它们的设备，因为这是它们存在的唯一目的。较旧的桌面浏览器不应该让您担心媒体查询，因为它们不会成为目标市场。除了基本的 CSS 之外，还使用了媒体查询。较旧的浏览器将使用您的标准 CSS，而移动设备将同时使用这两者。
有人知道 twitter bootstrap 和 polyfill 之间的区别吗？我应该使用哪个？

【解决方案3】：

不要为您的图像设置像素混乱，而是将此 css 用于 img 标签：

img {
max-width: 100%;
height: auto;
}

【讨论】：