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 等，它们提供了响应式设计。