background-size、不同的设备显示不同的pic

background-size

• background-size：contain；

图片将按比例自适应区域

• background-size：100% 100%；

图片将在左右和上下两个维度填满背景区域

• background-size：cover；

图片完全覆盖背景区域，按比例缩放，有可能造成图像显示不全

---

在不同的设备上显示不同的图片

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

上面程序中的min-width也可以替换成min-device-width；

---