发表于： 2018-06-12 20:24:04
1 555
今天完成的事情：
1、完成了任务13
2、总结了深度思考问题
明天计划的事情：
1、拆解任务14的禅道。
2、学习前端组件化、模块化相关知识点，开始任务14
遇到的问题：
css中的1px和各种屏幕上的px单位概念有点混淆不明，明天再深入看看说明
收获：
1.如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
方案1
*{margin: 0;padding: 0;} —— 被摒弃的方案
原因：
一方面，*导致CSS渲染引擎在渲染CSS的时候，使用*遍历整个DOM 树，影响性能渲染性能。
另一方面，*的威力太大，统统重置，把很多没有必要的都重置了
方案2
reset.css
最先作者：Eric Meyer
目的：在各个浏览器达到统一的效果。
缺点：代码量多，很多用不到的代码，建议可以找到其中需要的挑出来用
方案3
Normalize.css
由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库，Bootstrap用的就是normalize.css。
很多人说reset.css太暴力了，normalize.css相对要温柔一些。normalize.css修复了不同浏览器常见的不一致，规范化常见的组件风格，保存有用的默认值。因此，选择用Normalize.css来取代其它的CSS Resets
更优的方案：
针对项目再写一个，参考这些方法，做进一步的优化，特别是做大项目的时候。
没有特殊要求下，用reset.css和normalize.css足矣
----------------------------------------------------------
2.任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？
这个……没有发现，有什么要特别注意的嘛？
-------------------------------------------
3.移动端有哪些常见布局方式？
流式布局：主要靠百分比进行排版
响应式布局
利用@media进行断点，在每个断点中编写css
@media还可以用在link标签上，按需‘加载’css。
善用flex弹性盒布局
用rem做单位
4.固定宽度布局开发WebApp如何实现多终端下自适应？
（这个问题查询资料后看的有点糊涂，不知道理解的对不对）
简单说就是在<head>标签中加入下面代码，使用viewport元标签控制布局：
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=2 user-scalable=no">
viewport 是用户网页的可视区域，也可以叫做“视区”，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，查看网页时需要通过缩放网页或通过滚动条左右上下平移才能看到全部网页内容。
content="width=device-width”即是让当前viewport的宽度等于设备屏幕的宽度，此时网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip 的宽度值是相等的
initial-scale用于指定页面的初始缩放比例：
initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度
initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍
maximum-scale用于指定用户能够放大的最大比例
user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页
返回列表
评论