css北京图片自适应

随着互联网的飞速发展，网页设计成为越来越重要的一环。而网页设计中的CSS（Cascading Style Sheets）也在其中扮演着至关重要的角色。在网页设计中，一张美丽的背景图片往往能够加强整张网页的美感，而CSS的自适应功能，则能够让这张美丽的背景图片在各种不同设备上呈现出更好的效果。

/* 设置背景图片 */
body {
  background: url("beijing.jpg");
}

/* 在不同设备上自适应 */
@media screen and (max-width: 768px) {
  body {
    background-size: 100% auto;
  }
}

@media screen and (max-width: 992px) {
  body {
    background-size: cover;
  }
}

@media screen and (min-width: 1200px) {
  body {
    background-size: 1200px auto;
  }
}

以上代码使用了CSS的自适应功能，在不同设备的屏幕上自动调整背景图片的尺寸，从而获得更好的视觉效果。其中，

@media screen and (max-width: 768px)

表示在宽度小于等于768px的屏幕上，背景图片的宽度将设置为100%（高度自适应）。

@media screen and (max-width: 992px)

则表示在宽度小于等于992px的屏幕上，背景图片的宽度将设置为cover（保持宽高比放大或缩小，不留空白）。最后，

@media screen and (min-width: 1200px)

表示在宽度大于等于1200px的屏幕上，背景图片的宽度将设置为1200px（高度自适应）。

通过这些CSS代码，我们能够让背景图片在不同的设备上自适应，从而提高整个网页的美感和可读性。