css中自适应屏幕大小

CSS中的自适应屏幕大小，也称为响应式布局，是一种在不同屏幕尺寸下优化网页显示的技术。它使得网站在不同设备上都能够自动适应屏幕大小，无论是桌面、平板电脑还是手机。

以下是一些CSS代码片段可以帮助实现响应式布局：

/* 将body作为基础设置 */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* 设置网站容器宽度，随着屏幕大小调整 */
.container {
  max-width: 100%;
  margin: 0 auto;
}

/* 使用@media查询调整元素属性 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media screen and (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
} 

上述代码中，设置了一个通用的字体大小和行高。在容器类中，使用了max-width属性来将容器充满页面，使其随着屏幕尺寸调整。使用@media查询，可以根据屏幕宽度设置不同的容器宽度，适应更多的设备屏幕大小。

总之，在CSS中使用自适应屏幕大小的技术可以帮助优化网页在不同屏幕尺寸下的显示效果，提高用户体验。