响应式、视觉状态与页面排查
HTML、CSS 与 JavaScript 基础#Python全栈#第七阶段#HTML、CSS 与 JavaScript 基础#响应式、视觉状态与页面排查约 594 字 · 2 分钟阅读
追问显示点击任意追问卡片可收起 / 展开
响应式页面需要适配哪些变化？
追问 屏幕宽度、文字缩放、内容长度和触控操作，为什么不能只靠缩小整张页面处理？
移动端 viewport 元信息有什么作用？
追问 为什么一般不应通过禁止用户缩放来解决布局问题？怎样验证真实窄屏表现？
px、百分比、em、rem 与视口单位应如何选择？
追问 字体、容器宽度和页面高度分别适合考虑什么参照？移动浏览器工具栏变化有什么影响？
媒体查询如何根据条件切换样式？
追问 如何围绕内容何时放不下选择断点？移动优先的样式组织有什么特点？
图片怎样适配容器并避免不必要的变形？
追问 等比例缩放与固定尺寸裁剪分别如何实现？
object-fit 与宽高约束怎样配合？页面出现横向滚动条时，如何定位原因？
追问 固定宽度、长字符串、内边距、视口单位和定位元素分别怎样导致溢出？
display: none、visibility: hidden 与 opacity: 0 有什么区别？
追问 它们对占位、点击、键盘聚焦与可访问性可能产生哪些不同影响？
按钮和输入框应有哪些视觉与交互状态？
追问 悬停、键盘焦点、禁用、加载和错误状态如何表达？为什么不应只依赖颜色区分？
CSS transition 与 animation 各适合什么效果？
追问 怎样避免动画影响可读性和操作？如何照顾希望减少动态效果的用户？
元素样式不符合预期时，如何使用开发者工具排查？
追问 匹配规则、被覆盖声明、计算样式和盒模型面板各能回答什么问题？