在标签内直接写@media规则即可，需置于标签内部且不可嵌套，常见断点如(max-width: 768px)适配手机，注意视口meta标签和样式优先级，内联@media无法缓存。
在 <style></style> 标签里直接写 @media 规则就行
只要 <style></style> 在 HTML 文档内（比如放在 中），就可以像在外部 CSS 文件里一样，原样写 @media 查询。浏览器会正常解析，不需要额外配置或包裹。
常见错误是把 @media 写在了 <style></style> 外面，或者误以为要加 style 属性、用 JS 拼接——都不需要。
-
@media必须写在<style></style>标签内部，不能嵌套在其他规则里（比如不能写在.box { ... }里面） - 多个查询可以并列写，顺序按需决定（层叠优先级仍遵循 CSS 规则）
- 推荐把响应式规则集中放在
<style></style>底部，方便维护
@media 语法和常用断点怎么写
最常用的写法是基于视口宽度判断，比如适配手机和桌面。注意括号必须有空格，max-width 和 min-width 别拼错，单位必须带 px（或 em、rem）。
<style>
.header { font-size: 18px; }
@media (max-width: 768px) {
.header { font-size: 14px; }
}
@media (min-width: 1024px) {
.sidebar { display: block; }
}
</style>
-
(max-width: 768px)匹配宽度 ≤ 768px 的设备，常用于移动断点 -
(min-width: 1024px)匹配宽度 ≥ 1024px 的设备，适合平板/桌面 - 可以用
and组合条件，比如(min-width: 768px) and (max-width: 1023px) - 避免用
device-width，它依赖设备像素比，行为不稳定
为什么样式没生效？几个高频坑点
媒体查询写了但没反应，大概率不是语法错，而是被覆盖、条件不匹配或加载时机问题。
- 检查是否被更高优先级的样式覆盖（比如行内
style或 ID 选择器） - 确认视口 meta 标签存在：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端不会触发max-width - 如果用 JS 动态插入
<style></style>，确保插入后 DOM 已就绪；若用document.write，可能破坏解析流程 - Chrome DevTools 的 “Toggle device toolbar” 要手动刷新页面才能重新计算媒体查询
要不要把媒体查询抽到外部 CSS？
小项目或单页 HTML，直接写在 <style></style> 里完全没问题；但一旦样式变多、需要复用，或者涉及缓存、HTTP/2 复用优势，就该拆出去。
- 内联
@media无法被浏览器缓存，每次加载 HTML 都得重传 - 多个页面共用同一套断点时，分散在各
<style></style>里容易不一致 - 构建工具（如 Webpack）通常会对外部 CSS 做压缩、提取、代码分割，内联则绕过这些优化
真正容易被忽略的是：媒体查询本身不“智能”，它只看当前视口尺寸。如果你在 JS 里动态改了元素宽高，@media 不会重新触发——得靠 window.matchMedia() 或 resize 监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
