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

技能补强响应式设计——流式布局与适配性设计汇报人：xxx时间：2026技能知识011.关于响应式设计技能知识响应式设计是一种通过CSS的媒体查询和灵活布局技术，使网页能够在不同设备上自适应显示的设计方法。3种常见的网页布局对比如表所示。布局类型单位类型适应性优点缺点固定布局像素（px）固定宽度，适应性差

设计简单，布局易控制在不同屏幕上体验不佳，尤其是小屏幕设备流式布局（FluidLayout）百分比（%）宽度自适应，内容灵活在大多数屏幕上适配性较好在极端屏幕尺寸下可能需要调整响应式布局弹性单位（em）+媒体查询全面适应设备屏幕几乎在所有设备上均可获得最佳体验开发复杂度高，需要更多设计和调试工作固定布局适合需要精确控制布局的场景，但不适合移动设备；流式布局相对灵活，但在某些极端屏幕尺寸下可能出现不美观的情况；而响应式布局是当前网页设计的主流，能在几乎所有设备上提供一致的用户体验。2.弹性单位技能知识响应式设计不单需要调整布局，还需要调整字体大小、边距等，使用弹性单位可以帮助我们实现更灵活的设计。常见的弹性单位有以下4种。（1）em：相对于父元素的字体大小。（2）rem：相对于根元素的字体大小。（3）vw：占视口宽度的百分比，1vw等于视口宽度的1%。

vh：占视口高度的百分比，1vh等于视口高度的1%。3.媒体查询技能知识媒体查询是响应式设计的核心工具。它让我们可以为不同的设备和屏幕尺寸指定不同的CSS样式。媒体查询的方法有两种，即内联式和外联式。下面通过代码来进行演示：利用媒体查询，当文档宽度超过720px时，调整元素的样式以适配大屏设备。（1）内联式：直接在HTML文件的<style>标签中使用。（2）外联式：将媒体查询写入外部CSS文件，并通过<link>标签引入。技能实践02流式布局技能实践

流式布局的核心思想是通过百分比宽度、弹性盒子（Flexbox）或CSS网格（Grid）来设计响应式网页，而不是固定的像素值。这样可以确保网页在不同尺寸的屏幕上都能良好显示。例如，使用媒体查询（MediaQueries）来调整不同屏幕尺寸下的布局和样式。

为了防止前面学的知识生疏，这里回顾一下之前学习过的语义化标签，同时使用通义灵码来生成一个简单基础的日记网站：流动布局技能实践

利用浏览器（以谷歌浏览器为例）打开已初步编辑好的日记网页，右击并选择“检查”，找到Dimensions便可切换不同的设备（这里以iPhoneXR为例）。为了遵循流式布局和适配性设计原则，可以为网页添加以下代码：没有使用响应式设计时，页面布局是固定的，常会导致页面内容溢出，特别是在小屏幕设备上，用户体验较差。当使用响应式设计时，页面布局根据设备宽度调整，元素大小和排列方式也根据屏幕变化，使得网站在不同设备上都能自适应显示，给用户更好的体验。思考与练习请同学们注意：填空题考查CSS选择器、盒模型、开发者工具、变量作用域及盒模型设置；判断题分析CSS属性、优先级、样式继承及命名规范；选择题判别选择器优先级、布局特性、变量作用域、工具功能及响应式单位。一、填空题答案static（静态定位）滚动到指定阈值（或“滚动至元素到达视口特定位置”）justify-content最近的已定位（position不为static）父元素子元素超出容器宽度时自动换行二、判断题答案×××√√三、选择题答案ACBABDABD一、填空题1.CSS中的默认定位方式是________。2.CSS中的position:sticky会使元素在________条件下固定。3.Flexbox布局中的主轴对齐方式由________属性控制。4.在CSS中，设置position:absolute时，元素相对于________定位。5.Flexbox布局中，flex-wrap:wrap表示________。二、判断题1.CSS中的position:static会使元素脱离文档流。（）2.CSS中的float属性用于控制元素的透明度。（）3.z-index属性可以用来控制浮动元素的层叠顺序。（）4.CSS中的clear:both属性用于清除浮动的影响。（）5.在CSS响应式设计中，vw表示占视口宽度的百分比。（）三、选择题1.在CSS中，使用position:absolute时，元素是相对于哪个元素定位的？（）A.最近的已定位的父元素

B.浏览器窗口

C.最近的子元素

D.视口2.如果父元素包含浮动子元素并且出现了高度“塌陷”，可以通过哪种方式解决？（）A.设置父元素的position为relative

B.在父元素后添加一个空的<div>标签C.设置父元素的overflow为hidden

D.删除浮动属性3.CSS中的vh和vw单位分别代表什么？（）A.相对于父元素的宽度和高度

B.相对于视口的宽度和高度

C.相对于根元素的宽度和高度

D.固定宽度和高度4.关于Grid布局，以下哪些描述是正确的？（多选）（）A.Grid是二维布局，支持行和列的控制

B.每个Grid容器可以包含多个Grid项目C.Grid只能创建一行或一列的布局

D.Grid项目的大小可以通过grid-template-colu