如何跨移动设备提供图像

Question

我正在开发适用于移动设备的网页,包括智能手机和平板电脑.

我正在使用jQueryMobile,因此大多数功能在所有设备上都能很好地工作.

我的问题是,我想使用非常高分辨率的图像,以便使用平板电脑获得最佳质量.如果我使用720X1280 - 平板电脑上的页面看起来很棒 - 但在智能手机上 - 不会发生缩小尺寸.

我是否必须使用320x480进行构建 - 然后在平板电脑上进行缩放？有没有灵魂或指导方针？

Answer 1

使用响应式图像.因此,该图像将根据设备的大小进行缩放.

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

以上css代码将自动采用父容器大小.

这里有一些很好的例子和原子.

http://filamentgroup.com/examples/responsive-images/

http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

适用于自适应图片的Javascript插件:

http://adaptive-images.com/

灵活图像的精彩教程:

http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch9.pdf