4-3 响应式设计——流式布局与适配性设计.pptxVIP

技能补强响应式设计——流式布局与适配性设计汇报人：xxx时间：2026

技能知识01

1.关于响应式设计技能知识响应式设计是一种通过CSS的媒体查询和灵活布局技术，使网页能够在不同设备上自适应显示的设计方法。3种常见的网页布局对比如表所示。布局类型单位类型适应性优点缺点固定布局像素（px）固定宽度，适应性差设计简单，布局易控制在不同屏幕上体验不佳，尤其是小屏幕设备流式布局（FluidLayout）百分比（%）宽度自适应，内容灵活在大多数屏幕上适配性较好在极端屏幕尺寸下可能需要调整响应式布局弹性单位（em）+媒体查询全面适应设备屏幕几乎在所有设备上均可获得最佳体验开发复杂度高，需要更多设计和调试工作固定布局适合需要精确控制布局的场景，但不适合移动设备；流式布局相对灵活，但在某些极端屏幕尺寸下可能出现不美观的情况；而响应式布局是当前网页设计的主流，能在几乎所有设备上提供一致的用户体验。

2.弹性单位技能知识响应式设计不单需要调整布局，还需要调整字体大小、边距等，使用弹性单位可以帮助我们实现更灵活的设计。常见的弹性单位有以下4种。（1）em：相对于父元素的字体大小。（2）rem：相对于根元素的字体大小。（3）vw：占视口宽度的百分比，1vw等于视口宽度的1%。vh：占视口高度的百分比，1vh等于视口高度的1%。

3.媒体查询技能知识媒体查询是响应式设计的核心