css使网页适应不同屏幕

在今天的移动互联网时代，大多数的用户使用手机来浏览网站，因此，网站必须兼顾不同的屏幕大小，以适应不同的手机设备。为此，CSS是改变布局和样式的理想工具。下面，我们将详细介绍如何使用CSS使网页适应不同屏幕。

@media only screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

首先，我们需要使用媒体查询来检测屏幕的大小，并根据屏幕大小来应用不同的CSS样式。媒体查询允许我们在不同的屏幕宽度下应用不同的CSS样式。

body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

除了使用媒体查询外，我们还需要使用相对单位，如百分比或em，来设置元素的尺寸。在上面的示例中，我们使用了百分比来将网页的宽度设置为100%，并使用了max-width属性来限制最大宽度以避免网页过宽。使用margin:0 auto属性将网页居中对齐。

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

对于图片等内容，我们还需要使用max-width和height:auto属性来处理，这将确保图片能够适应不同屏幕的大小，而不会失真或变形。

总之，通过使用媒体查询和相对单位，我们可以轻松地使网站适应不同的移动设备。这样，我们的网站将在所有设备上具有出色的用户体验。