今天做了的事：休息，做了一个申请延♂时的PPT，手里面的图全写完了，申请了无名弟子6群的管理，来赚学分延长时♂间。 
明天要做的事： 跟珺琢再次合♂体，如果有新的图就写完，如果没有就把所有图看一遍，修改bug，优化代码，看看各处是不是可以兼容以后可能会出现的功能。 
今天遇到的问题：

因为这个项目主要是移动开发，所以谈一下个人对于移动前端布局的浅见。

1.基石——viewport（视口）

这点我们在做css任务的时候就用到了，这里面为了这个叙述的完整性，就在这里再次介绍一下。

什么是viewport

简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。

viewport是用来干什么的

viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

对viewport的控制

如今可以绝大部分浏览器里（即主流的安卓浏览器和iOS），都支持对viewport的一个控制了。一般的，我们会这么写。

viewport默认有6个属性

width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串”width-device”

• initial-scale: 页面初始的缩放值，为数字，可以是小数
• minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
• maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
• height: 设置viewport的高度（我们一般而言并不能用到）
• user-scalable: 是否允许用户进行缩放，’no’为不允许，’yes’为允许

使用起来很简单，只要在头文件中写入一下代码即可： 

2.初级做法——flex布局

此种实现方式依赖于弹性布局的强大能力和移动端浏览器（封装成的app）对于flexbox的良好支持。我们可以在移动端肆无忌惮的使用flex，弹弹弹，弹走鱼尾纹。 
其要点是：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。总结为，文字流式，控件弹性，图片等比缩放。 
使用这个布局，最好采用px单位，简化代码的复杂程度，以减少后期维护成本。

3.高端大气——rem布局

这个布局主要思想就是除了font-size外的单位都用rem单位，然后通过媒体查询和js动态读取到的手机屏幕分辨率，动态的改变font-size大小，来实现在不同分辨率下的高清布局。 
还有一种说法是不要所有都使用rem，诸如底部导航这种显而易见适合用flex的地方就用flex，两种混合着用。 
因为这个方法只是仔细阅读了，而没有实际使用过，所以说的比较简单。但是这个rem布局的强大之处，就连阿里和网易这样的公司都在使用。虽然两个公司具体实现手法不同，但是其主要思想都是基于rem。现将代码附在文末，希望可以帮助大家。我本人也要在之后的移动开发中尝试征服这个布局。 

从网易与淘宝的font-size思考前端设计稿与工作流 
感悟： 
1.之前的理解很有错误，不是使用了rem就实现了自适应。实际上在一般情况下，使用rem还有诸多的不便。除非配合上文提到的布局使用，才能实现自适应。 
2.在我做的这个项目就大量采用flex，然而又使用了rem单位，这就比较四不像了。