今日完成的事

1.学习viewport

viewport说白了就是设备上显示我们网页的区域，我们在浏览器能看见网页区域都叫viewport，但viewport不只有浏览器的可视区域的大小，可能比可视区域大也可能比可视区域小。默认情况下移动设备上的viewport都是大于浏览器的可视区域的。在理解viewport前我们要明白1件事，那就是css1px不等于设备‍‍的1px，css的像素是抽象概念，设备的像素是屏幕物理像素，这是2个概念，1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px‍‍就是满屏的宽度了。‍‍

‍

移动设备上viewport分为3种，分别为‍‍layout viewport 和 visual viewport，ideal viewport三种，layout viewport，‍‍Layout viewport为设备默认的，一般大于浏览器可视区域的宽度的。‍‍visual viewport浏览器可视区域的大小。i‍‍deal viewport是移动设备的理想可视窗口，简单理解ideal viewport就是窗口完美适配网页，用户不用‍‍缩放和横向滚动条就能正常的查看网站的所有内容。‍‍‍‍‍‍‍‍

浏览器默认都是layout viewport，我们要把它改成ideal viewport，用meat标签输入一个‍‍<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"就行了。‍‍‍‍我对这段代码的理解就是把CSS像素与手机的分辨率匹配了，之前css1px可能对手机分辨率3px，现在CSS1px就是对应手机分辨率1px。所以开发人员可以进行自适应开发了‍

2.完成了任务三

任务三我先是建立了一个大的标签涂上背景颜色在头部建立了一个div里面放上头部log，然后在下方中间部分建立一个p标签把文字写好，然后在p标签下方插入两个底部的log，最后在用span标签的绝对定位把数字加上，

下面是代码部分

明天计划的事

写任务4

遇到的问题

昨天写任务三时文字的单位用了em，这导致了屏幕分辨率增大后文字变得十分的小

今天改用px后好很多

昨天我的图片大小都是用的百分比，这就导致分辨率增大后出现了滚动条，今天全都换上了固定的px就解决啦

收获

作任务三时用到了图片的标签属性，剧中的属性和定位的属性，使我对这些属性的理解更加深了。