发表于: 2018-06-09 22:47:54

1 569



1、第一个页面基本完成,包括轮播图,和主体的内容部分。


明天的计划:


1、代码优化,剥离出navbar、轮播图、页脚部分,用sass进行分开。

2、写第二个页面。尽量写完。

3、准备11号又到我的小课堂。想讲轮播,但是,有点虚。先准备一下。


遇到的困难:


1、轮播图。这东西,都知道怎么回事。但是写的时候就比较蛋疼,逻辑有点绕。不过总算写出来了,箭头堆叠问题,换了种思路,直接让箭头原来是消失的,点击激活样式出现。

2、关于自适应的问题。之前没有太重视,这次在重构的时候让我有点措手不及。首先,我之前把自适应和响应式弄混了。

3、任务14、15的重构大部分是用到了flex布局来进行排版,兼容性问题目前要不要考虑,总感觉是个不好的习惯。。。



收获:


1、昨天遗留的问题,通过和师兄探讨,终于找到了解决办法。这里写一下整个思路:

轮播图嘛,老规矩,通过input的radio两种状态,checked或者没被checked,去绑定你要的东西。首先是绑定图片的位移,位移的方式有很多种,我这里写的是position:relative,其实不是真的位移,而是视觉上的欺骗(前端就是view),你还可以用maigin-left或者padding-left来实现视觉上的位移,其实大同小异,我个人不喜欢改变他的文本流位置,而且后续子元素要用到绝对定位,所以就用了相对定位,其实个人觉得最好的是transform属性;

2、改了两个师弟的任务,从师弟日报学到的,之前没注意过的细节问题。是关于meta viewport的更多知识:

关于缩放:

这里指的缩放,是相对于ideal viewport来缩放的,缩放值越大,当前viewport的宽度就会越小,反之亦然。

举个栗子:在iphone中,ideal viewport的宽度是320px,如果我们设置 initial-scale=2 ,此时viewport的宽度会变为只有160px了

理解:就是原来1px的东西变成2px了,但是1px变为2px并不是把原来的320px变为640px了,而是在实际宽度不变的情况下,1px变得跟原来的2px的长度一样了,所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此,我们可以得出一个公式:

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。ideal viewport宽度指的是完美适配移动设备的宽度。


进度:CSS-任务14


开始时间:2018.06.7

  

结束时间:2018.06.14

有无延期风险: 无。

禅道:http://task.jnshu.com/zentao/my-task.html






返回列表 返回列表
评论

    分享到