RWD Images & Videos

Responsive Web Design - Images

1. set width property to 100%

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

这样图片就变为响应式的了，可以放大或缩小。注意：图片可能被放大到超过原始尺寸。更好的解决办法，在许多情况下是使用 max-width.

2. set max-width property to 100%

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

这样如果父元素的容器宽度小于图片原始宽度，图片会相应地缩小显示。但是若父元素容器宽度（远）大于图片宽度，图片至多按原始尺寸显示，而不会放大到超过它。

3. 背景图通过设定 background-size 性质，也可以响应与容器放大和调整尺寸，参看 CSS Background 章节。

4. 针对不同设备，使用不同尺寸的图片。

/* For devices smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}
/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

通过使用媒体查询 min-device-width，检查设备宽度（而不是浏览器宽度，当然也可以使用 min-width， 但是这样在调整浏览器窗口尺寸的时候，也会导致重新加载图片），对应情况下加载合适的图片。

Responsive Web Design - Videos

1. set width property to 100%， 效果同 RWD images

2. set max-width property to 100%， 效果同 RWD images

最后，有许多免费的 Framework， 比如 Bootstrap 等，它们提供了响应式设计。