发表于： 2018-06-17 19:41:58
1 580
今天完成的事情：
1.做好了请假手续，准备回来的时候销假
2.学习了css3的两个新属性transform和transition
3.完成了任务13汉堡侧栏的制作，基本还原官网给出的效果图，还做了按钮优化
4.提交了任务13并通过审核，写了任务13的任务总结并更新了相关档案
明天计划的事情：
1.回家处理户口的事情，有时间会进行任务14和小课堂的准备
遇到的问题：
1.汉堡侧栏的制作，这个是难点，下面总结自己的方法：
（1）首先将页面在概念上分为主页面和侧栏页面
（2）使用input[type="checkbox"]的复选框模拟点击选取和再次点击放弃选取的鼠标点击事件，用lable使触发按钮链接到复选框，使用display将复选框默认样式隐藏
（3）用input[type="checkbox"]：checked选择器实现当复选框为选取状态时，主页面整体向右移动80vw，body需设置overflow:hidden;，实现主页面向右移动可以使用css3新属性transform
（4）布置汉堡侧栏的布局，body设置relative，侧栏设置fixed，top设为0，left设为-80vw，高度设为100vh，宽度设为80vw
（5）当复选框为选取状态时，汉堡侧栏的left设为0，这样就实现了汉堡侧栏的主题功能
（6）如果需要加一些延时动画则需要用到css3新属性transition
收获：
1.web移动端布局方式整理
方法一:用流式布局,px做css单位,在大屏小屏自动适应,我之前一直用这种方法,适合于简单的页面,比如说列表页,写法比较简单,不用考虑太多
缺点是:
1.页面虽然展示正常,却不是等比缩放,在高清屏上难免看起来怪怪的(px换算统一除以2,在dpr是2.5或者3上看起来偏小)
方法二:用rem布局.
rem:css单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html的font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,则可起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的.
这里有一个需要注意的,用rem布局,可以起到等比例放大缩小的效果,但有时我们难免要对某个元素在不同屏上做一些特定的处理,我们马上就想起了媒体查询,是的,你如果单纯用rem布局,没有去动态修改viewport的缩放值(后面讲的淘宝的方案是动态修改viewport的缩放值),那是可以用媒体查询的,那么除了用媒体查询还有没有其他方法呢?答案是有的,根据dpr,我们在不同屏动态算出html的font-size时,顺便把dpr算出来加到html里面去,这样我们可以通过css去控制,
如下:
<html data-dpr="1" style="font-size: 32px;">
然后,css里可以这样写:
[data-dpr="1"] div{ //处理代码 }
这就是我们经常在h5页面看到,为什么用rem布局还要动态设置这个data-dpr的原因,可以给css处理不同dpr留下钩子.用rem布局做css单位,很多时候我们元素div的font-size是不需要用rem的,我们还是想用px给文字设置大小,这个时候这个钩子就显得很 有用了.
方法三:淘宝的lib-flexible方案
淘宝的这个方案,是rem布局+viewport设置(iOS),就是在iOS系统上,动态的设置viewport,如下:
iphone5
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
iphone6 plus
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
在iOS上,这种方案真的不错,解决了很多问题,1px的问题也解决了,具体实现方案后面放链接.
但是在安卓上呢?淘宝的这种方案在安卓是统一设置viewport的缩放为1的,因为安卓机上这个值设置了不一定有效,比如说0.5或者0.333,安卓机上可能都会解析为1
这个时候怎么处理呢?我们可能会想,反正安卓上dpr都是1,而苹果上dpr现在至少都是2,那么我们可以根据这个来做区分,
[data-dpr="1"] div{ //处理代码 }
这样确实可以做区分,但是有一个问题我们没考虑到,就是安卓机上也有高清屏的,这么说,我们在dpr=1设置了1px,在ios上自动缩放,可能显示0.5或者0.333,但是在安卓机上呢?在大部分dpr等于1上显示1px,但是在那些高清安卓机上呢?显示的是2px甚至3px,这个时候应该怎么处理?
理一下:这个时候的问题是,ios上都没问题了,1px也很细,但是安卓上,1px还是很粗,可以怎么办呢?大部分安卓机并没有像苹果那样的retina屏,所以在大部分情况下我们会对这个问题忽略,即ios上显示细的1px,而android上显示的相对粗一些.
当然,如果安卓上也一定要跟ios上显示一样细,也可以有其他方法,这个可以查看H5页面1PX的实现,有很多种方案,比如通过伪元素来缩放,背景实现,抑或是图片实现等等.网上有很多相关文章.
总结下:
（1）当我们做的H5页面是单纯的web app,跟PC不是同一套时,即我们不需要用到媒体查询时,我们可以用淘宝这个方案,这个方案解决了ios上高清屏的问题,而且可以像我们平时写css代码一样,很方便,只是编写过程中就是换算有点麻烦(有工具);
（2）虽然说简单的页面我们可以用流式布局,但是能做到等比例放大缩小就更好了,所以建议H5用rem布局;
（3）安卓上如果一定要实现细的1px,需要使用其他方法来实现,比如上面说的伪元素缩放,背景实现,图片实现等等.
2.前端为什么要做组件化
在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
随着React，angular等以组件（指令等）为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。
进度：css任务13
任务开始时间：2018.6.15
预计demo时间：2018.6.16
是否有延期风险：有（错估了任务难度，预计延期一天）
禅道：http://task.ptteng.com/zentao/project-task-719.html
任务总结：
任务名称：CSS=TASK13
成果链接：https://huangbaihei.github.io/jnshu-css/task13/html/task13-1
任务耗时：2018.6.15-2018.6.17(3天)
技能脑图：
1.官方脑图：
2.个人脑图：
任务总结：
1.这个任务主要是学习拆分公共样式，将css代码中公共部分还有经常复用的部分拆分出来放在公共样式里，编写页面样式时可以调用，目的是为了简化css代码，降低重复书写的频率，从而实现代码优化。
2.在做任务的过程中进一步对sass的使用加深了认识，对一些嵌套，变量，混合宏的使用更加熟练了。
3.在这个任务中可以重新审视自己任务7的代码，发现自己的不足，从而逐步对自己的代码进行重构和优化，对一些样式的细节重新处理，逐步完善代码，注意代码规范。
4.在布局上也是常用的几个布局，flex，position等，主要是对前面所学的知识进行复习和增强熟练度。
5.这个任务的难点在于制作汉堡侧边栏，制作这个侧边栏需要用到复选框表单，position的知识，还有css3新属性transform，transition等。
返回列表
评论