发表于： 2018-11-02 16:29:01
1 816
今天完成的事情：
修改任务十三的几处问题
修复第一个页面侧边框拉开后无法与下面对齐问题
修复边框太大问题
加了超链接以后字体颜色改变问题
右边时间应该靠右的问题
以及顶部的图标改变光标
完成任务十三
明天计划的事情：明天计划开始任务十四，并观阅相关资料知识
遇到的问题：发现第一个页面的侧边导航栏打开后与下面内容不对齐，后来请教了师兄查了资料解决了问题。
收获：由于这几个任务基本都是用sass改写以前的任务，所以除了sass并没有学习其他方面的知识，不过通过改写以前的任务发现了不少，自己以前的问题比如代码不规范等等，所以这也是收获。
任务十三总结
其实总体上说在做任务的时候，并没有太多的问题和难点，也是突然意识到自己这段时间学到了不少东西，像刚来的时候基本天天都有问题，一直要去请教师兄，自主解决问题的时候很少，就是完成这个任务以后，就觉得自己自主解决问题的情况越来越多，这让我越来越觉得自己的知识储备都在一天天壮大。
深度思考
1.如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
按需求出发
1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码， 自己网站上没用到的不用重置，且无意义的重置不要 （比如div本不需要{margin：0；padding：0}）， 尽量保证用到的重置是高效简洁的；
2.如果要使用normalize，可以将normalize.css作为自己项目的基础CSS， 自定义样式值来满足自己的需求。(例如去掉a标签自带的下划线和p标签的自带的margin）
3.如果选择不用，可以根据自己需要的再去设置改变，或者写一段适合自己的修改默认样式的代码。
2.任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？
没有发现有冲突的地方。如果有我跟倾向与选择sass，因为使用sass更简单快捷方便。
3.移动端有哪些常见布局方式？
1>.固定布局
固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。
演示demo
2>.流动布局
流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。
演示demo
3>.bootstrap布局
bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
演示demo
4>.媒体查询+REM布局
使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的响应式。
演示demo
5>.flex布局
Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
4.固定宽度布局开发WebApp如何实现多终端下自适应？
visual viewport的概念：
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
在默认情况下，一般来讲，移动设备上的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的物理上的长度是相同的） 例如iphone 5的ideal viewport是宽度320px，iphone 6的宽度是375px。
任务耗时两天
返回列表
评论