异常教程

HTML style media 属性（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

二、基础语法：媒体查询的结构与基本用法

媒体查询（Media Queries）是 HTML 和 CSS 中用于根据设备特性动态调整样式的核心工具。通过 @media 规则和 style 标签的 media 属性，开发者可以轻松实现响应式布局。

2.1 媒体查询的两种声明方式

媒体查询可以通过两种方式实现：内联样式和外部样式表。

方式一：内联样式

直接在 <style> 标签中使用 @media 声明：

<style>  
  @media screen and (max-width: 600px) {  
    body {  
      font-size: 14px;  
      background-color: #f0f0f0;  
    }  
  }  
</style>

方式二：外部样式表

通过 <link> 标签的 media 属性加载不同样式表：

<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css">  
<link rel="stylesheet" media="screen and (max-width: 767px)" href="mobile.css">

2.2 媒体特性详解

媒体查询的核心是媒体特性，常见的包括：

  • width/height：视口的宽度和高度。
  • min-width/max-width：最小/最大宽度。
  • orientation：设备方向（portrait 或 landscape）。
  • aspect-ratio：宽高比（CSS4 新增）。

示例：根据屏幕宽度调整字体大小

<style>  
  /* 当视口宽度小于等于 600px 时触发 */  
  @media (max-width: 600px) {  
    h1 { font-size: 20px; }  
  }  

  /* 当视口宽度介于 601px 到 900px 时触发 */  
  @media (min-width: 601px) and (max-width: 900px) {  
    h1 { font-size: 24px; }  
  }  
</style>

三、媒体特性进阶：理解复杂场景

3.1 媒体类型（Media Types）

除了通过特性判断，还可以通过 media 属性指定样式生效的设备类型，例如：

  • screen：电脑、手机等屏幕设备。
  • print：打印预览或打印机。
  • speech：屏幕阅读器等语音输出设备。
<!-- 仅在打印时生效的样式 -->  
<style media="print">  
  body { font-size: 12pt; color: #000; }  
</style>

3.2 逻辑运算符：组合多个条件

使用 and、not、only 等运算符实现复杂判断：

  • and：同时满足多个条件。
  • not：否定某个条件。
  • only：仅在支持媒体查询的浏览器中生效（兼容旧版浏览器）。

示例：组合多条件实现复杂响应式

<style>  
  /* 只有屏幕且宽度大于 1024px 时触发 */  
  @media screen and (min-width: 1024px) {  
    .sidebar { display: block; }  
  }  

  /* 排除移动设备竖屏模式 */  
  @media not all and (orientation: portrait) {  
    .mobile-only { display: none; }  
  }  
</style>

四、实战案例：构建一个响应式导航栏

4.1 场景需求

设计一个导航栏，在桌面端显示完整菜单，移动端折叠为汉堡图标，并通过媒体查询实现切换。

HTML 结构

<nav class="navbar">  
  <div class="logo">MySite</div>  
  <ul class="menu">  
    <li><a href="#">首页</a></li>  
    <li><a href="#">产品</a></li>  
    <li><a href="#">关于我们</a></li>  
  </ul>  
  <button class="hamburger">&#9776;</button>  
</nav>

CSS 响应式样式

<style>  
  /* 默认样式（移动端） */  
  .menu { display: none; }  
  .hamburger { display: block; }  

  /* 当视口宽度大于 768px 时 */  
  @media (min-width: 768px) {  
    .menu { display: flex; }  
    .hamburger { display: none; }  
  }  
</style>

4.2 动态交互增强

通过 JavaScript 实现点击汉堡图标切换菜单：

document.querySelector('.hamburger').addEventListener('click', () => {  
  document.querySelector('.menu').classList.toggle('active');  
});

补充样式

.menu.active { display: flex !important; }

五、性能优化与常见问题

5.1 避免过度使用嵌套媒体查询

过多的嵌套会增加 CSS 解析负担，建议合并同类条件：

/* 不推荐：多层嵌套 */  
@media (max-width: 768px) {  
  @media (orientation: portrait) {  
    /* ... */  
  }  
}  

/* 推荐：合并为单一条件 */  
@media (max-width: 768px) and (orientation: portrait) {  
  /* ... */  
}

5.2 移动优先设计原则

从移动端开始编写样式，再通过媒体查询扩展桌面端功能：

/* 移动端默认样式 */  
.container { flex-direction: column; }  

/* 桌面端增强样式 */  
@media (min-width: 768px) {  
  .container { flex-direction: row; }  
}

六、未来趋势与扩展学习

6.1 CSS 自适应布局的演进

随着 CSS Grid 和 Flexbox 的普及，媒体查询更多用于功能增强而非基础布局。但其仍是条件样式控制的核心工具。

6.2 高级技巧：结合 CSS 变量

通过 @media 动态修改 CSS 变量值，实现更灵活的主题切换：

:root {  
  --primary-color: #333;  
}  

@media (prefers-color-scheme: dark) {  
  :root {  
    --primary-color: #fff;  
  }  
}

七、总结与实践建议

通过掌握 HTML style media 属性和媒体查询，开发者可以轻松构建适应不同设备的网页。建议读者：

  1. 从简单场景入手：先实现基础的宽度适配。
  2. 善用开发者工具：通过浏览器的响应式测试功能调试样式。
  3. 关注浏览器兼容性：使用 Can I Use 验证媒体查询特性支持情况。

响应式设计的核心在于“以用户为中心”，通过合理利用媒体查询，你的网站将能优雅地适应从手机到桌面的每一寸屏幕空间。

（全文约 1800 字）

最新发布

查看更多文章