发表于： 2018-05-26 21:39:31
2 587
今天完成的事情：
对页面设置定宽，调试代码
明天计划的事情：
开始任务14
遇到的问题：
页面2开始使用vw来保证方形，页面改为定宽之后存在布局破坏的风险，需要对页面主体方框重新设置样式。
由于里层div不能直接设置宽高撑起父级div，只能由外而内层层设置。
为了框中文字居中，设置inline-block，使用定位居中。
收获：
页面结构要提前合理布置，避免由于对于页面理解错误造成后期大量改动页面结构、样式。
任务13
开始时间：5.17
预计结束时间：5.21
延期：5天
http://task.jnshu.com/zentao/project-task-629.html
任务13深度思考
1.如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
由于浏览器对于html规则实现不同，元素在各个浏览器之间表现不一致，同时这种不一致可能造成页面布局破坏。需要对样式不一致的元素进行统一化，这种做法就是样式重置。
reset是对元素统一归零；而normalize让元素表现正常，对于元素不一致的样式进行统一，有用的样式保留，同时修复浏览器自身的缺陷。
2.任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？
架构是更高层次的实现，而规范仅仅是代码编写的指导原则和规则，保证代码风格统一，可读性，可维护性。
如果有冲突，架构优先。架构解决的是怎么完成项目，提前做出的计划，需要考虑项目的完成和以后的演化。
3.移动端有哪些常见布局方式？
#1、固定布局
固定布局思路沿用PC端，上手比较快。<head>里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局，这里类似即可。
缺点也显而易见，大屏手机显示网页比较宽，而固定布局宽度参照永远是320px，导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候，两边空白更宽。
#2、流动布局
以前PC端很少用到这种布局，因为网页要么就一种宽度，要么就两种宽度，分宽窄屏处理。而手机上不同，大部份手机默认宽度都不一样，所以流动布局可以很好解决自适应需求。 流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。例如设计稿宽度为640px，上面有一个导航里包含四个菜单，四周边距为20px，四个菜单等宽，那么边距应该为20px/640px=3.125%，每个菜单的宽度为100%/4=25%。DEMO里还有边框，所以记得改变盒子模型，加box-sizing:border-box。
优点是无论网页宽度如何改变，四个菜单的宽度永远一样，并且等宽。缺点是不够灵活，如果菜单数量有变化，就满足不了了。
#3、浮动布局
很多乐观的人，看到Flexbox最新一版的规范，满心欢喜的觉得移动端可以不用浮动布局了。但很遗憾，对于Android 2.3支持的Flexbox老规范，连最简单的多行商品按顺序排列，都实现不了。对于这种情况，我喜欢用传统的浮动方式。因为对于开发人员，这种循环是最简单的。再加上:nth-child伪类处理边距，干脆利落。当然，因为不需要兼容老版本IE了，浮动的写法也变得简单许多。
#4、Flexbox布局
现在我大部份布局都是用Flexbox，包括你以前用浮动的情况，大部份也可以用Flexbox代替。 例如上面流动布局用百分比做的宽，局限性就是无法增加删除菜单，改变菜单数量。如果改为用Flexbox布局，这个问题迎刃而解，不论菜单有多少个，都自动等宽排列成一行。 再说两点： Flexbox有好几版，所以会导致不兼容的情况，特别是Android 2.3。做了个小工具→Flexbox生成工具←。暂时只做了最简单的几种情况，但都兼容iOS 5+、Android 2.3+、Windows Phone 8+，满足日常需求没问题。 在Flexbox里，margin很神奇，所以会导致你频繁用margin:auto;。如果你养成了这个坏习惯，老iOS和老Android里会死得很惨。建议用Flexbox工具里的技术属性，来处理居中情况。
#5、混合布局
把所有学到的知识，灵活运用在布局中。 混合布局示例，设计稿宽度640px，边距20px，左侧大图宽高390px，右侧小图宽高190px。首先外层容器Flexbox，让里面左右结构显示。容器640px去掉左右边距40px剩600px，左侧390px/600px=65%，右侧190px/600px=31.66666667%，两者之间边距20px/600px=3.33333333%。右侧里面小图片直接宽度100%，高度跟宽度1：1，最后通过Flexbox让两个图一上一下，完成。三张图片记得用图片自适应，比例1：1。
#6、定位布局
定位在移动端也用得挺多，特别是弹窗。 position: fixed; left: 50%; top: 50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); 如此简单就搞定水平垂直居中的弹窗。 实际使用中，有少数几个手机的浏览器居然不支持translate3d，实在无语。如果非要兼容这些浏览器，推荐使用Flexbox弹窗。
4.固定宽度布局开发WebApp如何实现多终端下自适应？
#1 head加入viewport，自适应屏幕大小，缩放功能
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>#2 使用%宽度，保证布局的统一性
#3 @media响应式设计
返回列表
评论