发表于： 2018-05-31 23:00:49
2 512
一、今日完成的情况
1、看了昨天的文章，结果误解了根据项目特征进行技术选型这句话，以为要先选择一个框架来进行拆解......，搞了半天原来是对自己重构的页面进行拆解，又重新开始重构页面，进行拆解。
2、之前接的学分任务，由于是新的任务，还没有指定规范要求，和师姐沟通后，创建了任务检查要求和方法，赚学分不易，努力工作，且行且珍惜。
3、小课堂节奏加快了，才讲完没几天，又要讲了，开始准备小课堂，把基础知识再学习整理一遍。
二、明天的计划
1、继续做任务十四；
2、继续准备小课堂，把今天整理的知识制作成课件。
三、遇到的问题
任务总算是知道思路了，暂时没遇到疑难问题。
四、收获
小课堂准备讲移动端的常见布局方式，之前了解了一些基础知识，现在再深入学习学习。
一、再来思考一下移动端和PC端的区别。
1.PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性。
2.在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件，还有一个是移动端弹出的手机键盘的处理，这样的问题在PC端都是没有的。
3.在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，而在手机端，如果要做一些动画、特效等，一般选择CSS3，既简单、效率又高。
4.一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小。
5.在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。
二、提到移动端布局，又想起之前学习的<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">的meta标签,往后的任务中，一直在使用，再来回顾回顾。
1.什么是viewport？简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，但其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。所以，一般的，我们会专门给浏览器设计一个移动端的页面。
2.viewport默认的6个属性：
（1）width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device";
（2）initial-scale: 页面初始的缩放值，为数字，可以是小数;
（3）minimum-scale: 允许用户的最小缩放值，为数字，可以是小数;
（4）maximum-scale: 允许用户的最大缩放值，为数字，可以是小数;
（5）height: 设置viewport的高度（我们一般而言并不能用到）;
（6）user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许。
三、几种布局方式：
1.固定布局：固定布局的布局方式，思路沿用PC端。<head>里把viewport加好，然后设想整个网页的宽度为320px，然后按照PC端布局方式进行布局即可。这样的写法是会比较好的还原设计稿，而且速度也会比较快，但是这样也有缺点，在缩小的时候有些设备会比较模糊，因为设备被强行放大了。
2.流动布局：流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，可以想到，流动布局会有很强的可塑性和流动性。换句话说，通过设置了百分比，就不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，我们可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。缺点：流体布局由于需要计算转换，有些细节的地方还需要用媒体查询来做兼容，所以做起来挺费时间，而且对于设计稿的还原也不够高。
3.rem布局：rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性，利用rem单位，相对于跟（html）字体的大小，来计算相应元素的宽高，首先将html的font-size设置为：20px或30px或50px或100px，再利用浏览器默认自己大小(16px)也就是16px*62.5%=10px，这样就是html{font-size:62.5%;}，而不是html{font-size:10px;}因为浏览器（PC）最小就是12px。这样一来1rem = 10px。优点：可以适应多个屏幕 ，也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候，可能需要用到vh,或是百分比。
到点了，回去洗衣服，其他的布局方式明天继续整理。
任务进度：
任务十四—十五
任务开始时间：
2018.5.29
预计任务完成时间：
2018.6.4
禅道：http://task.ptteng.com/zentao/project-task-714.html
返回列表
评论