css 如何自适应分辨率

CSS 是前端开发中的一项非常重要的技术，其中自适应分辨率的技巧更是非常实用。通过结合媒体查询，我们可以轻松地实现对不同分辨率的兼容，让我们来看一下如何实现吧。

/*------------------------------------*/
/*------针对不同分辨率的样式设置------*/
/*------------------------------------*/

/*默认样式*/
body {
  font-size: 16px;
}

/*大屏幕样式*/
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

/*中等分辨率样式*/
@media (min-width: 768px) and (max-width: 1199px) {
  body {
    font-size: 16px;
  }
}

/*小屏幕样式*/
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

如上所示，我们通过媒体查询设置不同的样式条件，针对不同分辨率下的页面展现进行设置。其中最小宽度为 1200px 时为大屏幕样式，最小宽度为 768px，最大宽度为 1199px 时为中等分辨率样式，最大宽度为 767px 时为小屏幕样式。

通过这种方式，我们不仅可以自适应不同分辨率的屏幕，还可以减少繁琐的兼容性工作，提高开发效率。