发表于： 2018-06-07 17:09:16
2 601
今天完成的事情
任务三 布局实现自适应
明天计划的事情
继续刷任务
遇到的问题
尝试整个网页所有元素按比例自适应 使用rem时发现缩放到一定比例后无法再缩放 查到原因是chrome 字体 10px 以下不再缩放
后来查到一篇关于淘宝布局的文章 是先定义一个大号的字体 然后再根据比例计算rem 同时发现这么搞需要媒体查询或者js 暂时放弃此想法
然后重新对比演示图gif 发现比例应该是在设计图的基础上减少一般(@1x 切图? 没有重新切图 直接用css调整了大小)
收获
详细了解了下 px em rem 之间的关系
font-size 默认是 16px
em,rem 是相对单位 分别相对于父级和根节点的font-size
em 例 父级font-size 16px 则 1em = 16px 1.5em = 24px
rem 则是相对于根节点 html 如 html { font-size: 25px; } 则 1rem = 25px 相比于 em 更好用更好控制
了解了 @2x @3x 切图的意义
浮动会造成父级元素坍塌(父元素高度变为0) 恢复高度需要清除浮动
当代码没有按照预想去展现 烦躁的时候看到一句话 "细节掌握不够 机制等理解不够" 然后就神奇的不烦躁了 这个应该是我今天最大的收获
返回列表
评论