【问题标题】: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;
}

【讨论】:

    猜你喜欢
    • 2012-08-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-17
    • 2013-11-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多