新闻中心

在css中如何使用媒体查询media query

2025-10-23
浏览次数：次
返回列表
使用媒体查询可根据设备特性应用不同样式，实现响应式设计。基本语法为@media 媒体类型 and (媒体特性) { 样式规则 }，常用媒体类型包括screen（屏幕设备），常用于适配不同屏幕宽度、高度等，确保页面在各类设备上良好显示。

在css中如何使用媒体查询media query

在CSS中使用媒体查询（Media Query）可以让你根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的样式。它常用于响应式网页设计，使页面在不同设备上都能良好显示。

基本语法

媒体查询通过 @media 规则包裹CSS样式，只有当条件满足时，内部的样式才会生效。

格式如下：

@media 媒体类型 and (媒体特性) { /* 样式规则 */ }

其中“媒体类型”可选，常见值包括：
screen（屏幕设备）、（所有设备）。
实际开发中常省略类型，直接判断特性。

按屏幕宽度调整布局

最常用的场景是根据视口宽度设置断点，适配手机、平板和桌面设备。

例如：

MarsCode MarsCode

字节跳动旗下的免费AI编程工具

MarsCode 339 查看详情 MarsCode /* 默认样式（小屏幕） */ .container { padding: 10px; }

/ 当屏幕宽度 >= 768px 时应用 / @media (min-width: 768px) { .container { padding: 20px; } }

/ 当屏幕宽度 >= 1024px 时应用 / @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } }

也可以限制范围：

/* 屏幕宽度在 768px 到 1023px 之间 */ @media (min-width: 768px) and (max-width: 1023px) { .sidebar { display: none; } }

常用媒体特性

除了 (height)：视口高度

  • (orientation: portrait) 或 (aspect-ratio)：宽高比，如 (aspect-ratio: 16/9)
  • (hover: hover)：设备是否支持悬停（区分鼠标和触摸屏）
  • (prefers-color-scheme: dark)：用户是否启用深色模式

    • 示例：适配深色模式

    @media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }

    最佳实践建议

    写媒体查询时注意以下几点：

    上一篇：html5怎么居中_HTML5元素水平垂直居中实现方案
    下一篇：css伪类:first-of-type与last-of-type区别

    搜索