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元素的背景颜色会变成不同的颜色。开发者可以根据实际需求调整媒体查询的断点和相应的样式。
评论已关闭