今天完成的事情：

任务3的代码修改了一下  补充了一点内容

明天计划的事情：任务4

遇到的问题：在手机上展示页面如何自适应

收获：

（补充）

6.如何用photoshop切图？用切图工具进行图片的处理，通过导入保存到本地文件夹就可以使用了。

7.dpi是什么东西？

dpi(每英寸点数）

8.关于自适应，屏幕分辨率，图片尺寸

手机分辨率，就是屏幕的像素点

屏幕大小，4.7寸5寸等是指手机屏幕对角线的物理长度

9.如何自适应网页设计？

1、在HTML头部增加viewport标签。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2、不使用绝对宽度

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。

3、流动布局

流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

————————————————