移动端CSS样式引入：如何通过媒体查询和链接标签打造响应式设计？

本文共计1065个文字，预计阅读时间需要5分钟。

请提供需要改写的伪原创开头内容，我将为您进行简化改写。

常见错误是把 media 写成 screen and (max-width: 768px) 却没加 viewport 元标签，导致移动端根本不会触发该断点——因为默认视口宽度远大于 768px。

• <meta name="viewport" content="width=device-width, initial-scale=1"> 必须存在，否则 media 查询基于桌面视口计算
• media 值推荐用 screen and (max-width: 480px)、screen and (min-width: 768px) 这类明确像素值，避免用 handheld（已废弃）或模糊的 only screen
• 多个 <link> 可共存，浏览器只下载并应用匹配的那一个，未匹配的不会请求 CSS 文件（注意：IE9 及以下会预加载所有 link，但现代移动端无需考虑）

@media 查询写在 CSS 文件里 vs 外链 link 的区别

写在 CSS 文件里的 @media 是「条件应用」，文件本身总会被下载；而 <link media="..."> 是「条件加载」，不匹配时整个文件不会发起 HTTP 请求。这对首屏性能影响显著。