发表于: 2016-08-22 21:44:35
1 1191
遇到的问题:
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、自信心受挫严重,开始怀疑转行是否正确,能否成功
评论