主题
媒体查询(Media Queries)
媒体查询是 CSS 提供的一种强大功能,用于根据不同的设备特性(如屏幕宽度、高度、方向、分辨率等)来应用不同的样式。它是实现响应式与自适应设计的核心工具之一。
基本语法
css
@media media-type and (condition) {
/* CSS 规则 */
}
常见媒体类型
all
:适用于所有设备(默认)screen
:适用于屏幕设备print
:适用于打印预览模式speech
:适用于屏幕阅读器
常见条件属性
max-width
:最大宽度min-width
:最小宽度max-height
/min-height
orientation
:屏幕方向(portrait 或 landscape)resolution
:屏幕分辨率
示例:常用断点样式
css
/* 手机 */
@media (max-width: 767px) {
body {
background: #f9f9f9;
}
}
/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
body {
background: #e0e0e0;
}
}
/* 桌面 */
@media (min-width: 1024px) {
body {
background: #ffffff;
}
}
媒体查询的组合用法
css
@media screen and (min-width: 768px) and (orientation: portrait) {
/* 针对竖屏平板 */
}
媒体查询嵌套(Sass 示例)
scss
.container {
padding: 16px;
@media (min-width: 768px) {
padding: 32px;
}
}
使用建议
- 采用 移动优先(min-width)策略:从小屏幕开始构建,再逐步增强
- 统一管理断点,避免混乱(可定义为变量)
- 与网格系统、弹性布局配合使用效果更佳