今天完成的事情：

1、完成task7的第一个页面。

明天计划的事情：

1、把task7剩下的两个页面写完。
遇到的问题：

1、主要是一个如何将psd转化为设计稿的问题，我们修真院给的设计个用ps打开是640*1136px，所以给的应该是iphone5为基准的高清设计稿，iphone5的物理尺寸因该是320*568px，在师兄的知道下看了http://www.cnblogs.com/lovesueee/p/4618454.html，才明白为什么设计稿是物理尺寸的2倍，主要是为了解决retina屏下相关图像的高清显示。在dpr=1时（iphone3gs），1个css像素代表物理设备上的一个像素，这时候如果加载一张图片（大小为100px*100px）一个位图(css)像素就代表物理设备上一个像素，这时候的图片是清晰显示的。可是在dpr=2（或者大于2）时，此时1个css像素就不是物理设备上一个像素，在dpr=2(iphone4)时，1个css像素代表4个物理设备像素，而此时加载一张图片（大小为100px*100px）,一个位图(css)像素就代表物理设备上4个像素，但是此时它们在两个手机iPhone3gs和iPhone4上所占有的物理尺寸大小是一样的，这时候在iphone4上显示的图片就相当于放大了一倍，这样的话在retina屏下，1像素分为4个像素，颜色就近取色，图片就会显得模糊。结果办法就是使用高清图即200*200px的图片，设置img｛width：10px;height:100px;｝这样容器缩小一半，但是此时在dpr=2的情况下，1位图像素恰好等于1css像素。这样就实现了图片的高清设置。

不知道解释的对不对，大家可以点进去看下那个博文，有配图，应该比我解释的清除。

在设计过程中我们在psd量取相应的宽高，然后在需要转化成相应的rem。

收获：

1、对于rem在移动端开发的认识更加深刻，因为rem是相对于根元素html的相对单位，与css media query（媒体查询）功能相结合，可是实现不同移动端上页面正常的显示。

2、进一步对移动端开发的认识。

      物理像素：一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

      设备独立像素(也叫密度无关像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

      设备像素比=物理像素/设备独立像素（简称dpr）

屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）

屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

dpi：dots per inch，最初用于衡量打印物上每英寸的点数密度（相当于IOS下的ppi）.

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