发表于： 2018-06-17 22:42:44
2 526
今天完成的事情：
完成任务13
做任务14
明天计划的事情：
把任务14、15做完50%。
遇到的问题：
轮播图写法有点蒙，箭头这部分得好好想想。
收获：
如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
1.使用通配符
2.使用Normalize.css
相较CSS reset，Normalize有一些自己的优势。
1. Normalize.css没有重置所有的属性，所以一些默认公用的属性无需自己再手动添加。
2. Normalize.css修复了浏览器的bug，修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css避免了浏览器调试工具中的大段继承链，
4. Normalize.css 是模块化的并且拥有详细的文档，方便进行自己的测试。
如果需要进行浏览器的默认样式重置，则可以根据自己的需要进行设置，或者写一段适合自己的修改默认样式的代码。要避免无意义的重置，尽可能让自己的代码简洁有效优化好。
任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？
SASS讲的是将css组块化，模块化。
CSS架构讲的是将css相同的部分提炼出来，组件一个公共库，借此提高复用率，精简代码。同时样式分离，并且把导航栏，轮播图这些当成一个块整体提取出来。
CSS架构会把CSS代码分的很细。讲究复用，精简。
SASS则是把代码组块化，模块化，方便后期维护。SASS对代码的精简并不能起太多作用。
移动端有哪些常见布局方式？
固定布局
固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。
流动布局
流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。
Bootstrap布局
固定宽度布局开发WebApp如何实现多终端下自适应？
visual viewport的概念：
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
layout viewport的概念：
简单的说，包含整个页面内容的那个区域
可以这样理解：有一张大白纸，白纸上面放置的就是html、body、div这些元素。这张大白纸就是layout viewport。
layout viewport的功能是用来约束你网站中最顶级包含块元素（containing block）html的。html的默认宽度是layout viewport宽度的100%
ideal viewport的概念：
就是给移动端屏幕的一个用于设置layout viewport的参考值，这个值是生产厂商给的。如果layout viewport的宽度等于ideal viewport 的宽度，屏幕上的文字、图片（当它们以px为单位时）的大小看起来就会很恰当。（或者说在不同设备上看到的10px的物理上的长度是相同的）
layout viewport的宽度和ideal viewport的宽度相等。缩放比例是1的时候，visual的宽度就和layout viewport相等了。
进度：task13
任务开始时间：2018.6.14
预计结束时间：2018.6.17
是否有延期风险：无
禅道：http://task.jnshu.com/zentao/project-task-687.html
返回列表
评论