CSS 响应式设计之媒体查询技术

CSS 媒体查询(Media Queries)是一种根据不同设备的特性(如屏幕宽度、分辨率、方向等)来应用不同的 CSS 样式的技术。它通常用于响应式设计,帮助网页在不同设备和屏幕尺寸下良好地展示。

基本语法

css 复制代码
@media (条件) {
  /* 样式规则 */
}
  • @media 关键字表示媒体查询。
  • (条件) 是测试设备特性的条件表达式,例如屏幕宽度、分辨率等。
  • {} 内包含满足条件时应用的样式规则。

常见的媒体查询条件

  1. 屏幕宽度 (min-widthmax-width)
    • min-width: 指定屏幕最小宽度,适用于宽度大于等于指定值的设备。
    • max-width: 指定屏幕最大宽度,适用于宽度小于等于指定值的设备。
css 复制代码
/* 当屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度小于等于600px时应用 */
@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}
  1. 屏幕方向 (orientation)
    • portrait: 垂直方向(高宽比大于1)。
    • landscape: 横向方向(宽高比大于1)。
css 复制代码
/* 适用于竖屏设备 */
@media (orientation: portrait) {
  body {
    font-size: 14px;
  }
}

/* 适用于横屏设备 */
@media (orientation: landscape) {
  body {
    font-size: 16px;
  }
}
  1. 设备分辨率 (resolution)
    • 用于指定屏幕的分辨率(如:DPI 或像素密度)。
css 复制代码
/* 适用于高分辨率设备,如 Retina 显示屏 */
@media (min-resolution: 2dppx) {
  img {
    width: 200%;
  }
}

常见媒体查询示例

响应式布局

在响应式设计中,媒体查询帮助调整布局和样式,使得网站在不同的设备上都能有良好的展示效果。

css 复制代码
/* 基本样式 */
body {
  font-family: Arial, sans-serif;
}

/* 大屏幕设备 */
@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;
  }
}
图片大小

根据设备的分辨率来选择不同的图片资源。

css 复制代码
/* 默认图片 */
img {
  width: 100%;
  height: auto;
}

/* 高分辨率屏幕(如 Retina 显示屏) */
@media (min-resolution: 2dppx) {
  img {
    content: url('high-res-image.jpg');
  }
}

组合条件

可以使用逻辑运算符 and, not, 和 only 来组合多个条件。

  • and:同时满足多个条件。
  • not:排除某个条件。
  • only:应用特定条件,通常用于避免某些旧版浏览器解析媒体查询。
css 复制代码
/* 屏幕宽度大于768px 且方向为横屏 */
@media (min-width: 768px) and (orientation: landscape) {
  body {
    background-color: lightyellow;
  }
}

/* 不适用于小于768px的设备 */
@media not all and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

媒体查询的优先级

  1. 外部 CSS 中的媒体查询优先级高于全局样式。
  2. 在同一文件中,后定义的媒体查询覆盖前面定义的样式。

媒体查询是响应式设计的核心技术之一,通过合理的组合和设计,可以使网站适应各种设备,提升用户体验。

相关推荐
遗憾随她而去.7 分钟前
css3的 --自定义属性, 变量
前端·css·css3
haogexiaole2 小时前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15884 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
小周同学@7 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok7 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~7 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号7 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌7 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康8 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海8 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs