【问题标题】:What is the preferred way to Scale up and down images in responsive web design for Mobile?在移动响应式网页设计中放大和缩小图像的首选方法是什么?
【发布时间】:2011-04-26 03:15:33
【问题描述】:

在响应式网页设计中放大和缩小图像的首选方法是什么?

不同屏幕尺寸的不同图像更好,还是我们应该放大和缩小相同的图像?

考虑到网站的性能,哪个选项最好?

我需要跨浏览器的方式在所有最新和旧的移动浏览器上工作。

【问题讨论】:

  • 试试 { max-width:100% }

标签: css windows-mobile mobile-safari mobile-website fluid-layout


【解决方案1】:

Sencha.io Src 是一个很好的解决方案(基于 tinySrc)。

它进行设备检测,然后根据设备屏幕尺寸提供缩放图像。

http://www.sencha.com/products/io/

【讨论】:

    【解决方案2】:

    @jitendra 维亚斯,

    为不同的屏幕尺寸缩放相同的图像不是一件好事,但缩放图像对于响应式网页设计来说并不是一件坏事可能您必须以某些特定的分辨率(如 1024 像素和 480 像素)更改图像和设计,因为它们也是一种分辨率标签和移动设备。

    原因有很多,比如:

    1) 对于移动设备来说,加载大尺寸图片会很重。

    2) 为不同分辨率缩放单个图像有时会变得很难看,尤其是对于较大的图像。

    有一些参考网站链接可以了解如何巧妙地使用图像。

    http://thinkvitamin.com/

    http://colly.com/

    http://css-tricks.com/

    &文章http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

    【讨论】:

      【解决方案3】:

      我正在考虑编写一个小型 jQuery 插件来根据容器的大小通过 ajax 加载图像。但请随意窃取我的想法。 (如果你完成了,请在此处提及。);-)

      【讨论】:

        猜你喜欢
        • 2012-08-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-08-26
        • 2012-01-15
        • 2012-03-03
        • 2016-04-30
        • 1970-01-01
        相关资源
        最近更新 更多