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. 在同一文件中,后定义的媒体查询覆盖前面定义的样式。

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

相关推荐
南囝coding1 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖24 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花40 分钟前
i18n国际语言化配置
前端
编程贝多芬43 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript