网页设计与制作 课件 27 实现响应式图文布局.pptxVIP

;入门测

作业分析

知识回顾

设置视口

使用CSS媒体查询

媒体查询常用断点

引入外部样式表

;在响应式布局中，除了使用%单位之外，还常常会用到rem、em、vw、vh这样的相对单位，单位的选择对网页的灵活性和适应性至关重要。

本任务学习相对单位，实现响应式图文布局，在大屏中每行显示3个图文卡片，在中屏中每行显示2个图文卡片，在小屏中每行显示1个图文卡片，随着屏幕大小的变化，标题文字及段落文字的大小也相应调整。;学习内容;绝对单位，能够精确指定元素的大小和位置，如px

相对单位，是会根据父元素或视口大小进行动态调整，如%、rem、em、vw、vh等

;%（百分比）单位

%相对于父元素的尺寸，随父元素尺寸的变化而变化

vw（视口宽度）和vh（视口高度）

vw代表视口宽度的百分比，1vw等于视口宽度的1%

vh代表视口高度的百分比，1vh等于视口高度的1%

如果将元素的宽度设置为100vw，高度设置为100vh，该元素将覆盖整个视口，成为全屏元素;rem和em

em相对于父元素的字体大小

如果父元素的字体大小是20px，那么子元素中1em就相当于是20px

通过调整父元素，可以影响多个子元素的大小

rem代表的是“rootem”，相对于根元素（html）的字体大小

如果html的字体大小是16px，那么1rem就相当于16px;%+媒体查询实现动态布局。;rem+媒体查询实现字体动