HTML面试题媒体查询_html面试题媒体查询使用方法【步骤】-html教程-PHP中文网

媒体查询生效必须同时满足viewport标签正确、媒体类型显式声明、断点顺序合理三个条件；缺一不可，否则在Safari、Electron或真机上大概率失效。

html面试题媒体查询_html面试题媒体查询使用方法【步骤】

媒体查询不是写了就生效，它必须同时满足三个条件：viewport 标签正确、媒体类型显式声明、断点顺序合理；缺一不可，否则在 Safari、Electron 或真机上大概率白写。

viewport 标签没配对，`@media` 直接失效

移动端媒体查询失效的第一原因永远是这个：缺失或写错。浏览器默认以 980px 宽度渲染页面，@media (max-width: 768px) 永远不匹配。

必须放在最前面，不能用 JS 动态插入
禁用 user-scalable=no、maximum-scale 等限制项——它们会干扰视口计算，也违反可访问性
别写 width=375 或 width=1200，device-width 是唯一能响应真实设备逻辑像素的值
真机调试前，先用 Chrome DevTools 的 Device Toolbar 切换设备并刷新，否则断点不会重新触发

`@media screen and (min-width: ...)` 才是稳妥写法

@media (max-width: 768px) 在旧版 Safari 和 Electron 中常不生效，根本原因是它等价于 @media all and (max-width: 768px)，而部分渲染引擎对 all 类型下的断点解析不完整，尤其在非屏幕上下文（如打印预览）中会跳过样式计算。

显式写 @media screen and (max-width: 768px) 或 @media screen and (min-width: 769px)，screen 不可省
only screen 中的 only 是为兼容 IE8 及更早版本设计的，现代项目可直接省略
不要混用 min-width 和 max-width 描述同一组断点，比如 @media (max-width: 768px) 后紧跟 @media (min-width: 768px)，临界宽度 768px 会同时命中两个规则，谁赢取决于层叠顺序和选择器权重，不可控

断点顺序写反，小屏样式被大屏覆盖

把大屏规则写在前面、小屏写在后面，是新手最常踩的坑。例如：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

@media screen and (min-width: 1024px) {
  .container { width: 1200px; }
}
@media screen and (max-width: 768px) {
  .container { width: 100%; }
}

当视口为 600px 时，两条规则都匹配，但后者本应生效——若前者用了更具体的选择器（如 .container.main）或 !important，就会压住后者。

推荐「移动优先」结构：基础样式不加 @media，只对更大尺寸做增强
统一用 min-width 递增写法，如 @media screen and (min-width: 768px) → @media screen and (min-width: 992px) → @media screen and (min-width: 1200px)
断点值建议用 em 单位（如 45em），而非像素，以响应用户系统字体缩放设置
每个断点之间留 1px 间隙（如 min-width: 769px），避免临界值重叠

CSS 变量不能用在 `@media` 条件里

@media (min-width: var(--sm)) 是非法语法，浏览器会整条忽略，控制台无报错但规则被标灰。CSS 变量的计算时机晚于媒体查询解析阶段，两者不兼容。

变量只能在 @media 块内部定义或重写，例如：@media screen and (min-width: 768px) { :root { --gap: 1rem; } }
变量本身不能驱动媒体查询匹配，它只是静态覆盖；想响应横竖屏切换、深色模式等动态状态，得用 window.matchMedia()
所有变量必须有初始定义（通常在 :root），否则未命中任何 @media 时，var(--x) 会回退到 initial，导致样式异常

真正容易被忽略的是：媒体查询是静态的，它不监听 window.innerWidth 变化，也不响应用户缩放行为；所谓“适配”，本质是一组预设条件的快照匹配。临界值怎么定、单位怎么选、是否要加 screen，每一个细节都在影响最终是否真能在 iPhone、iPad 或 Electron 窗口中跑通。