今日完成的事

重头开始完成task3

今天在做task3的时候突然发现自己误解了题目，昨天貌似白忙活了，

做任务中的具体步骤中有两个学习资料是有关自适应的，但打开看的懵懵懂懂，

所有在百度中又了解了更多有关自适应的学习资料。

最终误以为是利用em，rem配合媒体查询完成自适应，将所有单位使用rem，

本身自己半懂不懂，又缺乏高人指点，瞎搞了两天，成品效果离目标越搞越远，在开发者工具中切换设备，

上下间距也会随之发生改变。

误解了步骤中的学习资料，忽略了任务目标，瞎搞的代码，纵向高度是动态变化的

一切推到重来，重新理解任务目标

目标效果：

页面横向上随视口增大而增大，纵向距离不发生变化

学习理解网页的五种布局方法

静态布局  

使用绝对单位（如px），网页的宽度是固定的

特点：屏幕尺寸不影响网页的布局，当屏幕小于网页宽度时，会出现滚动条

以便查看屏幕外内容

流式布局（ 百分比布局）

使用百分比定义宽度

特点:屏幕分辨率变化时页面元素大小变化，但布局不变。

但当屏幕过大或过小页面元素无法正常显示,不协调

自适应布局

创建多个静态布局，每个静态布局对应不同的屏幕分辨率范围。（阶段式）

特点：页面里元素位置变化，，大小不会变化。

响应式布局  

流式布局和自适应布局融合

特点：每个屏幕分辨率下面会有一个布局样式，元素位置和大小都会变。

头部会有以下代码

（对此代码理解还不够充分）

弹性布局包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位

特点：可以使包裹文字的元素随文字的缩放而缩放

明日计划的事

重新构建task3的代码

收获

任务步骤里有些东西和完成任务的关系并不是很大，并不是按顺序来完成任务操作，

要多思考，多查资料理解

了解了页面的布局方式