背景图怎样做响应式，为什么不能总用它代替 img？
讲解 CSS 背景图如何通过媒体查询和 image-set() 适配布局与像素密度，并比较 img、picture 在语义、替代文本、资源选择和图片尺寸占位上的优势，帮助决定装饰图与内容图的实现方式。还会说明背景图不提供固有尺寸，容器需要自行留出空间；内容图片则应保留替代文本和浏览器的资源选择能力。
核心关键词CSS background-image responsive image media query
面试知识索引 · 分类、标签与搜索
CSS · 响应式设计面试题，39 道完整答案
CSS · 响应式设计面试题第 1 页，显示第 1–39 题，共找到 39 道完整解析，可继续按分类、标签与关键词缩小范围。
39筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
响应式断点为什么不能直接照搬 768px 和 1024px？
解释常见断点来自历史设备尺寸和设计习惯，但实际断点应由内容溢出、列宽与可读性决定。展示如何从窄屏布局逐步扩展，并用媒体查询在布局真正需要变化的位置切换。通过主内容与侧栏何时能并排的例子，说明如何从窄屏逐步寻找断点，并减少因设备型号和历史数值造成的过密查询规则。
核心关键词CSS 响应式断点如何选择 依据内容 - 0003
container-name 怎么避免组件查错容器？
说明未命名容器查询如何选择最近的合格祖先，以及 container-name 如何把查询限定到指定祖先。通过卡片嵌套在侧栏中的例子解释名称匹配、容器类型与局部组件复用。同时解释容器名称只筛选目标元素的祖先，不会跨页面查找同名元素，也不能单独开启尺寸查询。
核心关键词CSS container-name 命名容器 作用 - 0004
容器查询和媒体查询要同时满足，该怎么写？
通过外层 @media、内层 @container 的写法，解释视口条件与组件容器条件如何共同限制样式。说明查询作用对象、嵌套时的逻辑与、层叠顺序，以及为什么不能用一个条件代替另一个。示例展示宽视口里的窄侧栏卡片为什么仍应保持单栏，并说明两种条件命中后还会继续参与正常的 CSS 层叠。
核心关键词CSS container queries media queries combination - 0005
要让元素成为尺寸查询容器，container-type 该怎么设？
说明 container-type 的 normal、inline-size 与 size 有何区别，为什么尺寸查询需要限制被查询尺寸受后代影响，并用可复用卡片例子展示容器创建、后代查询和常见失效原因。同时说明查询规则作用于容器后代，以及为什么只给容器命名或把类型写在目标元素自身，都不能得到预期的宽度判断。
核心关键词CSS container-type 容器查询 设置方法 - 0006
容器查询和媒体查询分别解决什么问题？
通过同一张卡片在主栏与侧栏中宽度不同的例子解释容器查询的基准，比较媒体查询针对视口与容器查询针对祖先容器的职责，并说明尺寸查询的创建方式及适用场景。进一步说明如何创建尺寸容器、无名查询怎样寻找最近祖先，以及页面骨架和局部卡片分别适合交给哪种规则控制。
核心关键词CSS 容器查询 container queries 与媒体查询区别 - 0007
容器查询可以嵌套吗，cqw 到底参考哪一层？
解释 @container 嵌套时外层与内层条件都要成立，可能分别匹配不同祖先；再区分容器查询单位 cqw、cqi 的最近合格尺寸容器基准，提醒不要把规则命中的命名容器与单位换算基准混为一谈。通过区块与卡片两层容器展示嵌套条件的实际命中方式，并解释找不到尺寸容器时容器单位的回退结果。
核心关键词CSS container queries nesting resolution - 0008
容器查询不受支持时，组件该怎样回退？
给出容器查询的渐进增强写法：先提供可读的默认单栏，再在支持 @container 的环境中根据容器宽度升级布局。说明为什么无需硬记浏览器版本号，以及如何用真实目标浏览器测试功能与回退。还会区分尺寸查询和其他容器查询能力的兼容性，说明为什么桌面浏览器能用仍需要检查项目实际运行的内嵌浏览器。
核心关键词CSS 容器查询 浏览器支持 回退方案 - 0009
容器样式查询怎样根据自定义属性切换样式？
解释 @container style(--theme: dark) 读取祖先容器计算后的自定义属性，再给后代应用规则。说明继承、精确值匹配、无需尺寸容器以及普通 CSS 属性样式查询的实现限制。通过卡片主题状态展示样式查询的写法，并区分查询祖先当前样式与检测浏览器是否支持某条声明这两种问题。
核心关键词CSS style queries container queries - 0010
cqw 和 vw 各按谁的尺寸计算，组件该用哪个？
比较容器查询单位 cqw、cqh、cqi 与视口单位 vw、vh 的尺寸基准，说明嵌套组件为何更适合容器单位、找不到合格容器时怎样回退，以及容器过窄时如何防止字体和间距缩得过小。还会解释行内轴单位与物理宽度单位在竖排时的差别，以及如何限制字体和内边距在极端容器宽度下的变化。
核心关键词CSS container query units vs viewport units - 0011
逻辑 margin 和 padding 写百分比时，基准是什么？
解释 margin-inline、padding-block 等逻辑属性的百分比并非按各自边的长度计算，而是相对包含块行内尺寸。说明横排与竖排书写模式下行内轴如何变化，避免把“始终按物理宽度”当成通用规则。用横排与竖排两个场景纠正常见的“所有百分比都永远按物理宽度计算”说法，并区分属性所在的边和计算基准。
核心关键词CSS logical properties percentage resolution - 0012
移动端的 svh、lvh、dvh 应该怎么选？
解释移动浏览器地址栏和工具栏出现或隐藏时，小视口、大视口、动态视口单位分别对应什么尺寸。结合全屏面板和页面首屏例子说明稳定性、遮挡与动态重排之间的取舍。再比较全屏菜单、首屏横幅对稳定性和可见区域的不同要求，并提醒检查安全区、工具栏变化与软键盘状态。
核心关键词CSS dynamic viewport units svh lvh dvh - 0013
@supports 和 @media 各检测什么，渐进增强怎么写？
比较 @supports 对 CSS 语法能力的判断与 @media 对视口、设备及用户偏好的判断。通过 Grid 布局回退示例说明先写基础样式、再包裹增强规则，并解释通过特性检测不等于页面效果正确。示例将特性支持条件与视口条件嵌套，展示旧环境和窄屏如何保留基础布局，并说明语法可用不代表实际排版正确。
核心关键词CSS @supports 特性检测 与 @media 区别 - 0014
响应式图片选 AVIF、WebP 时该用 picture 还是 srcset？
<picture> 可按 source 的 type 在 AVIF、WebP 与回退图片间选格式，srcset 和 sizes 则帮助浏览器选同格式下合适的分辨率。srcset 本身没有 type 描述符；选择图片资源时还须保留有意义的替代文本与稳定的布局尺寸。
核心关键词响应式图片 WebP AVIF 格式选择 picture type - 0015
给高 DPR 屏幕双倍图时，显示尺寸到底怎么设？
解释 CSS 像素与设备像素的区别：双倍图应在相同 CSS 尺寸内提供更多源像素，而不是把画面显示成两倍大。结合 1x、2x 的 srcset 示例说明浏览器如何选择资源及布局占位。还会区分固定尺寸头像的密度候选与流式文章图片的宽度候选，并解释资源清晰度、传输体积和页面跳动之间的取舍。
核心关键词响应式图片 高 DPR 双倍图 显示尺寸 - 0016
CSS 逻辑属性怎么适配从左到右和从右到左的排版？
margin-inline-start、padding-block 等逻辑属性跟着文字流的起点和块方向变化，同一条规则可适应 LTR、RTL 与竖排页面。图标间距和卡片强调线常适合这样写；若同时声明物理属性，指向同一边时仍要按级联规则决定结果。
核心关键词CSS 逻辑属性 与物理属性区别 书写方向 - 0017
Flexbox 和 Grid 里怎么用逻辑属性，真的有 gap-inline 吗？
Flexbox、Grid 的行列布局与文字书写轴是两套概念，逻辑边距按书写模式映射，gap、row-gap 和 column-gap 按布局结构产生间隔。列向 Flex 容器里，inline-size 也未必就是视觉上的宽；不存在可通用替代它们的 gap-inline 属性。
核心关键词CSS logical properties flex grid gap - 0018
margin-left 对应哪个逻辑属性？映射会变吗？
margin-inline-start 等逻辑属性按书写模式决定物理方向：横排 LTR 对应左边，横排 RTL 对应右边，竖排还会改变块轴。边距、内边距、尺寸与定位各有映射关系；从 margin-left 机械替换时，应先确认页面要跟随的是文字流还是固定物理边。
核心关键词CSS logical properties mapping margin padding - 0019
媒体查询怎么写？移动优先该用 min-width 还是 max-width？
@media 通过括号内的媒体特征决定规则何时生效。卡片布局可默认单列，再在 min-width 达到断点后改成多列；max-width 则适合从桌面样式向下覆盖。断点边界、规则顺序和内容何时拥挤，比设备名称更影响实际结果。
核心关键词CSS 媒体查询 min-width max-width 移动优先 - 0020
多条媒体查询都匹配时，最终用哪条样式？
同一视口可以同时匹配多条媒体查询，它们只决定样式是否进入级联，不会自动增加选择器权重。重叠断点发生冲突时，还要比较来源、重要性、层叠层、优先级与书写顺序；移动优先写法能减少覆盖，但不能跳过这些规则。
核心关键词CSS 媒体查询 级联 优先级 覆盖顺序 - 0021
媒体查询里的 and、逗号和 not 怎么组合？
and 要求两边条件同时成立；逗号分隔的是多个备选查询，任意一个匹配就应用规则。not 否定的是它所在的整个媒体查询，不是紧跟着的单个特性。要表达“宽度不是小屏”，可写 @media not all and (max-width: 600px)，但边界和媒体类型要写清楚，避免把未知特性也算进预期。
核心关键词CSS media query logical operators and not - 0022
媒体查询多了会让页面卡顿吗？
媒体查询本身通常不是性能瓶颈。浏览器会在视口或相关设备条件变化时重新判断匹配，并对受影响的样式重新计算。真正昂贵的往往是命中后触发的大量布局变化、复杂选择器、重型图片或脚本测量与写入交错。
核心关键词CSS 媒体查询 性能影响 重排 - 0023
高分辨率屏幕该用 resolution 还是设备像素比？
标准媒体特性是 resolution，可用 dppx、dpi 等单位描述输出设备每 CSS 像素对应的像素密度。(min-resolution: 2dppx) 常用于在高密度屏幕上替换背景资源；-webkit-min-device-pixel-ratio 是历史前缀写法。
核心关键词CSS media query resolution device-pixel-ratio - 0024
媒体类型和媒体特性有什么区别，能一起写吗？
媒体类型描述输出环境的类别，例如 screen、print、all；媒体特性描述更具体的条件，例如 width、hover、prefers-color-scheme。两者可以用 and 组合：@media screen and (min-width: 800px) 只在屏幕介质且宽度条件满足时生效。
核心关键词CSS 媒体查询 media type 与 media feature 区别 - 0025
JavaScript 怎么知道媒体查询是否匹配？
CSS 负责纯视觉布局时直接用 @media。脚本确实需要根据环境改变行为，可以用 window.matchMedia(query) 得到 MediaQueryList，读取 matches，再监听 change 事件。
核心关键词matchMedia JS 响应式状态判断 - 0026
移动优先具体怎么写，为什么也有人反对？
移动优先通常先写适合窄屏的基础样式，再用 min-width 媒体查询逐步添加宽屏布局。它鼓励先处理核心内容和有限空间，但不是所有项目都必须从手机设计稿开始。如果产品主要运行在大屏后台、移动版只是简化访问，先建立主要使用场景，再为窄屏做有意识的调整也合理。
核心关键词移动优先 mobile first 响应式设计 做法与争议 - 0027
orientation 判断横屏可靠吗？什么时候改用宽度断点？
媒体特性 orientation 根据视口的宽高关系判断 portrait 或 landscape，并不直接读取设备拿在手里的方向。浏览器工具栏、分屏窗口和虚拟键盘都可能改变可用视口，所以“横向视口”不等于“手机横过来”。
核心关键词CSS orientation media query landscape portrait - 0028
什么时候用 picture，而不是只给 img 写 srcset？
同一张图只需要不同分辨率或显示宽度时，通常用 <img> 的 srcset 和 sizes。如果不同视口要换构图、裁切或格式候选，可用 <picture> 包住多个 <source>，按 media 或 type 选择候选来源。
核心关键词HTML picture element srcset media art direction - 0029
怎样用 prefers-color-scheme 自动切换深色主题？
先给页面写可用的默认配色，再用 @media (prefers-color-scheme: dark) 覆盖颜色变量。这个特性反映用户或系统的配色偏好，不代表应用自身的手动主题选择。
核心关键词CSS prefers-color-scheme dark mode - 0030
怎样用 prefers-reduced-motion 照顾不适合动画的用户？
prefers-reduced-motion: reduce 表示用户偏好减少非必要运动。可以在该条件下关闭持续位移、缩放、视差等容易造成不适的动画，或换成更温和的淡入；不要假定所有动画都必须彻底删除。
核心关键词CSS prefers-reduced-motion media query - 0031
网页打印时，@media print 应重点改什么？
打印样式应让内容在纸张上可读，而不是原样截取屏幕。用 @media print 隐藏导航和交互按钮，恢复被滚动容器裁剪的正文，调整颜色、链接地址与分页位置。屏幕上的响应式列数不能直接当成打印列数，因为纸张宽度、页边距和分页机制都不同。
核心关键词CSS @media print responsive print style - 0032
媒体查询的范围写法和 min-width 有什么区别？
范围语法可以直接写 (width >= 600px)，也可以写 (400px <= width <= 800px)，与传统的 min-width、max-width 表达相应的边界条件。
核心关键词CSS 媒体查询 range 范围语法 min-width 区别 - 0033
响应式字号和间距该怎么搭配 rem、em 与视口单位？
rem 以根元素字号为基准，适合全站字号和间距尺度；em 以当前元素相关的字体尺寸为基准，适合组件内部跟随文字缩放；vw 等视口单位直接随视口变化。需要流体字号时可用 clamp() 给视口部分设上下限，避免小屏过小、大屏过大。
核心关键词响应式设计 rem 与 vw 单位配合使用 - 0034
图片的 srcset 和 sizes 怎样让浏览器选合适的文件？
使用宽度描述符时，srcset 列出各候选图片的源宽度，例如 400w、800w；sizes 告诉浏览器在不同媒体条件下图片预计占多少 CSS 宽度。浏览器结合显示宽度、设备像素密度等因素选择候选文件。
核心关键词HTML srcset sizes responsive image selection - 0035
怎样在 DevTools 中系统测试响应式页面？
先用设备工具栏改变视口宽度和高度，检查内容何时挤压、溢出或错误换行；再模拟 prefers-color-scheme、prefers-reduced-motion 等媒体特性，观察主题与动效。
核心关键词DevTools 模拟视口 prefers-color-scheme 响应式测试 - 0036
移动页面为什么需要 viewport meta？它与 vw 有什么关系？
移动浏览器如果没有合适的视口声明，可能使用较宽的默认布局视口再把页面整体缩小，导致 CSS 断点和文字看起来都不符合设备宽度。常见写法是 <meta name="viewport" content="width=device-width, initial-scale=1">。
核心关键词HTML meta viewport CSS responsive - 0037
vw、vh、vmin、vmax 怎么算，手机上要防什么？
1vw 是视口宽度的百分之一，1vh 是视口高度的百分之一；vmin 取宽高较小值的百分之一，vmax 取较大值。移动浏览器地址栏会伸缩，传统 vh 与眼前可见区域可能不一致；全屏面板可根据需求选 svh、lvh 或 dvh，并测试软键盘和浏览器工具栏。
核心关键词CSS viewport units vw vh vmin vmax - 0038
为什么字号只用 vw 会影响可访问性？
纯 vw 字号主要跟视口宽度变化，用户放大文字或调整浏览器默认字号时，可能无法得到预期的缩放；极窄视口也会把字压得过小，极宽视口又可能过大。可用 clamp() 给字号设上下限，并在首选值中加入 rem，让流体变化与用户字体设置保持联系。
核心关键词CSS vw font-size clamp accessibility - 0039
writing-mode 改变方向后，间距属性该怎么写？
writing-mode 决定文字行沿哪个方向排、下一行向哪侧推进，也会改变行内轴和块轴的物理朝向。margin-inline-start、padding-block-end 等逻辑属性跟随这些轴，适合需要支持横排、竖排和 RTL 的组件。
核心关键词CSS writing-mode vertical layout logical properties