CSS根据屏幕分辨率自动调整样式

在CSS中，可以使用媒体查询（Media Queries）来根据不同的屏幕分辨率应用不同的样式规则。下面是一个简单的例子，演示如何根据屏幕宽度来改变背景颜色：




/* 默认样式 */
body {
  background-color: lightblue;
}
 
/* 当屏幕宽度小于或等于768像素时 */
@media (max-width: 768px) {
  body {
    background-color: yellow;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时 */
@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: green;
  }
}
 
/* 当屏幕宽度小于600像素时 */
@media (max-width: 599px) {
  body {
    background-color: red;
  }
}

在这个例子中，根据屏幕宽度的不同，body元素的背景颜色会变成不同的颜色。开发者可以根据实际需求调整媒体查询的断点和相应的样式。

CSS根据屏幕分辨率自动调整样式

评论已关闭

推荐阅读