Css——媒体查询

最新推荐文章于 2025-06-22 15:29:17 发布

一只漫步前行的羊

最新推荐文章于 2025-06-22 15:29:17 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 媒体前端

本文链接：https://blog.youkuaiyun.com/qq812457115/article/details/125917569

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细解读了CSS媒体查询的使用，通过实例展示如何根据屏幕尺寸变化设置不同样式，实现响应式设计。包括@media规则、and、not和only操作符，以及宽度、最小宽度和最大宽度媒体特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media mediatype where (media feature) {
   /* CSS样式 */
}

属性	备注
mediatype	媒体类型：screen（电脑屏幕、平板电脑、智能手机）、print（打印预览）、all（所有设备）
where	条件：and（表示可以将多个媒体特性连接到一起，相当于“且”的意思）、not（表示排除某个媒体类型，相当于“非”的意思）、only（表示指定某个特定的媒体类型）
media feature	媒体特性：width（窗口=值生效）、min-width（窗口>=值生效）、max-width（窗口<=值生效）

例子

/* 当浏览器宽度等于1000px时背景变为粉色 */
@media screen and (width: 1000px){
  body{
    background: pink;
  }
}
/* 当浏览器宽度大于或等于1200px时背景变为天蓝色 */
@media screen and (min-width: 1200px){
  body{
    background: skyblue;
  }
}
/* 当浏览器宽度小于或等于900px时背景变为棕色 */
@media screen and (max-width: 900px){
  body{
    background: sienna;
  }
}