发表于: 2016-08-22 21:44:35

1 1192


今天完成的事情:
1、task1-task12按照要求重新检查了一遍,主要是把task3、task4和task5重新写了一遍,其他的做了些许修改
明天计划的事情:
1、闯关(闯关是个什么)

遇到的问题:

1、重写页面的过程中,发现几个问题,页面布局在Firefox上正常,在chrome和ios的Safari上会有变化,以前也有过这个问题,在ios的Safari和QQ浏览器显示页面的效果是不同的,当时不明白为什么,这次找到了原因:在html中会声明font-size:62.5%,这样1rem=10px,但是在chrome等webkit内核的浏览器,允许的最小的font-size是12px,所以即便生命了font-size:62.5%,在chrome中1rem还是等于12px;所以在用rem为单位的布局处都会出现变化。针对这一点的解决办法是令html中的font-size:625%,这样1rem=100px,避开了chrome的限制。但是同时又会有一个问题,如果在body中声明了font-size,而且在页面中有不在标签内的文字,Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候,出现了字体过大或过小的情况,但是刷新页面之后就正常了。解决方法:所有文字都放到标签内,body中不声明字体大小,而是到具体的标签或类中声明字体大小,可以避开这个问题;

2、关于在响应式布局中rem的使用,有些疑惑,一般情况下会设置一些断点,结合media query设置font-size,于是使用rem可实现不同屏幕尺寸取值不同,是在一个区间范围内有变化,响应式布局是这样使用rem吗?还是使用JS动态获取屏幕尺寸(窗口尺寸)来设置font-size,再结合使用rem进行自适应布局?还是使用百分比进行布局?简单俩说就是设置一个padding究竟是用百分比还是rem?我认为可能根据不同尺寸布局的情况确定,大多数用百分比,但是这种行业或公司习惯,不到具体项目,实在拿不准;

3、还是关于rem,font-size要不要使用rem为单位,在一篇关于手机淘宝自适应布局的文章里看到,他们并不建议font-size使用rem,因为这样可能会破坏字体的点阵(比如13px和15px的字体尺寸),同样,随着屏幕尺寸放大,字体是否要放大?还是字体不变,让大屏手机能够阅读到的文字更多?说白了是不是应该根据UI的效果实现?

4、自信心受挫严重,开始怀疑转行是否正确,能否成功

收获:
1、看了看其他准备闯关人的主页,基本上我的主页是最简陋的,还是需要找时间花点心思美化一下,但是基本上我的页面布局和PSD还是比较相符的,值得鼓励;
2、以IPHONE6的375px为基准设计,将PSD图纸转换为这个尺寸,然后再去量里面的布局尺寸;
3、<label>是<input>的标签,配合使用,<input>是内联元素,所以使用vertical-align垂直对齐;
4、float之后的垂直集中是比较麻烦的,必须保证元素B和C高度一致,才能使A里面的B和C同时居中;
5、li的display:inline-block之间的间隙是由于html中标签之间的空格导致;
6、其他的收获都已经写到问题的解决方法种了;



返回列表 返回列表
评论

    分享到