发表于： 2018-09-19 19:05:49
1 379
今天完成的事情：
任务13
明天计划的事情：
任务1415
遇到的问题：
布局问题，因为自己心态不好，所以做的页面也不怎么样，改了很多次，但是都不满意，只能说越改越烦，就一直删一直改，做任务和之前比差太多了，我可能需要休息一下，认真思考一下，今天做好任务13第2个页面，用到了flex-wrap换行，自动换行，做好了任务13.
收获：
任务总结，任务13并没有太大的难度，但做任务13让我感到困惑，为什么之前做的很好的东西，现在再去看就觉得很差，有问题的地方很多，再去重新写，就想做好一点。
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.移动端有哪些常见布局方式？
固定布局
固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。
流体布局
流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。
bootstrap布局
bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。
多列布局
column-count是css3的一个属性，主要用于文本元素，支持响应式。
column-count属性指定某个元素应分为的列数。
column-width属性指定列的宽度。
flex布局
flex也称为弹性布局，他会根据页面的剩余宽度自动分配空间。
还有就是gird布局你必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似，网格项（grid items）的源顺序无关紧要。你的 CSS 可以以任何顺序放置它们，这使得使用 媒体查询（media queries）重新排列网格变得非常容易。定义整个页面的布局，然后完全重新排列布局以适应不同的屏幕宽度
4.固定宽度布局开发WebApp如何实现多终端下自适应？
就是给移动端屏幕的一个用于设置layout viewport的参考值，这个值是生产厂商给的。如果layout viewport的宽度等于ideal viewport 的宽度，屏幕上的文字、图片（当它们以px为单位时）的大小看起来就会很恰当。
返回列表
评论