CSS3 @media 查询

发布于：2023-07-28 22:12:23

.example {
    padding: 20px;
    color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}