发表于: 2017-04-11 23:45:00
1 658
任务进展:
1:仿照bootstrap栅格系统的思路,重写了栅格系统适应响应式。
2:学习了JS引用类型。
3:思考问题:13.1:因为各大浏览器存在兼容性问题,需要一个重置浏览器默认样式的文件保证在不同浏览器上CSS表现一致,文件是一些页面基本元素的属性设置,使用时在页面引入即可。resetting 无前提重置所有样式,无视任何 user agent 预置样式,normalizing 只做适当重置。
13.3:移动端常见六种布局方式:固定布局,流动布局,浮动布局,flex-box布局,混合布局,定位布局。
13.4:固定宽度开发webApp实现多终端下自适应:iphone上,指定viewpoint的width等于页面设计宽度;andriod上,根据公式target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160计算得出target-densitydpi的值,指定到viewport中。
遇到问题:
1:在重写栅格时发现自己的row和container高度塌陷,原因是没有清除浮动,自己加了overflow-hidden,查看bootstrap源码是用伪元素:after清除,相比之下,伪元素清除更合适,避免overflow在某些情况下出现的内容隐藏问题。
2:学习了JS引用类型:Object类型,Array类型,Date类型和RegExp类型及其操作方法。学习exec()时对示例演示中pattern.lastIndex结果有些困惑,便将示例代码在chrome中运行了下,并查找资料,终于清楚。
明日计划:
学习JS
收获:
JS语言并不严谨,一些基本类型语法的使用会得出更大自由度的结果,在学习时要重点注意。
评论