任务3.最简单的移动页面之一。今天所做的就是利用布局知识按照设计图进行布局，完成简单的demo继续学习优化。使布局更好地适应屏幕变化（使用盒模型和百分比）。了解rem&em&px和在Demo中应用rem的区别。图像处理学习。明天计划的事情[]深度思考：手机分辨率和网页px的区别（TODO：周末补习）link1link2link3[]Task4计划和简单写作遇到的问题暂无收获1.利用布局知识制作更复杂的布局。使用盒子模型完成布局。明确目标：完成简单的demo，找出不足，继续学习优化。目标效果如下iPhone5/SE(320*568)模拟新的index.html并写了一个简单的布局div和css，将页面垂直分为两部分：topbar&container，其中topbar包含返回按钮，容器包含三个部分：标题、内容和联系方式。然后在PS界面上绘制参考线，简单的获取页面各部分的比例，并以此为基础完善CSS。效果如下图：在PhotoShop中找到图层工作区，找到要使用的素材点击右键-快速导出为PNG（因为有素材图片，所以不用图片）裁剪工具），并使用滴管工具获取背景色，然后在拾色器中获取背景色（前景色）#68cdd6接下来将图片素材导入index.html，调整图片的长宽并截取320*650的效果图GIF与现在的demo对比（吐槽它和PSD图不一样=.=）2.让布局更好的适应屏幕宽度的变化首先尝试应用刚写的demo换屏425px&768px的效果与当前渲染对比。后退按钮和标题没有太大变化。容器的左右边距太小。联系人的上边距太小。将容器的左右margin改为百分比，context和contacts的中间改为margin和padding的组合结果：基本完成与设计图的重合3.理解rem&em&px&%的区别&vw&wh&vm参考：CSS3REM设置字体大小rem和em的使用和区别有详细解释Viewport相关单位vw,vh..介绍和实际应用场景1)px：相对长度单位，相对于屏幕的分辨率。特点：优点：稳定准确缺点：改变浏览器的字体大小会破坏布局功能：给定一个具体的大小，辅助em和rem改写具体的单位2）em：相对长度单位，相对于的文字大小当前元素，如果没有设置当前元素的文字大小，则相对于浏览器默认字体大小计算公式：targetEM=1/parentPX*targetPX；特点：1、em的值不固定；2.会继承父类的字号缺点：如果不重新计算放大字体的em值，每层设置的复合字号会引起连锁反应。这种连锁反应是由'继承'引起的，想要避免继承的连锁反应可以在目标元素上显式设置px单位的font-size来停止继承。总结：px对应的em的值取决于它使用的字体大小。此字体大小受从父类继承的大小的影响，除非显示覆盖特定单位。功能：允许在特定设计元素范围内保持可扩展性（清空标志时应使用em单位）3）rem（rootem）：相对长度单位，只相对于HTML根元素特性：优点：只需修改根元素的大小即可按比例调整所有字号，避免字号逐层复合的连锁反应，IE8+浏览器均支持提示：应对不支持的浏览器，可以多写一个绝对单位声明，例如：p{font-size:14px;font-size:.875rem;}总结：px对应的rem的值取决于html元素的字体大小，会受到浏览器中设置的字体大小的影响，除非显示改写了特定的单位。作用：保证无论用户如何设置他的浏览器，布局都能调整到合适的大小，维护用户有自己的体验偏好的权利4）%特点：常用元素的百分比定位是基于parent的classposition:fixed元素的百分比定位是基于浏览器窗口的。position:absolute元素的百分比定位是相对于第一个父元素定位的，而不是静态定位。5)vw(视口宽度，视口指的是浏览器内部可视区域的大小)features:calculation:1vw=1%*width_viewport6)vh(viewportheight)features:calculation:1vh=1%*height_viewport7)vm(viewportmin)特征：计算：1vm=1%*(width
