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

Question

我在这个测试页面上工作： http://problemio.com/index_test.php

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

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

谢谢， 亚历

Answer 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

Answer 2

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

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

Answer 3

不要为图像设置像素测量值，而是使用此css代替img标记：

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