2015年3月24日
移动端重构——图标
摘要： 我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签。1.背景图片我们会选择sprite形式，吧所有的图标放大一个大图上， 考虑到retina屏，所以我们图标设计为实际大小的2倍，然后设置background-size 为实际大小。示例：图标大小为24px... 阅读全文
posted @ 2015-03-24 15:23 webfby 阅读(216) 评论(0) 推荐(0) 编辑
移动端----切入切出动画
摘要： 切入切出动画 transition动画与animation动画的区别在于：1、transition动画只能定义开始和结束位置，中间无法定义；而keyframes则可以定义n帧作为中间的过渡帧。2、对于切入切出动画来说，transition动画我们只需添... 阅读全文
posted @ 2015-03-24 11:07 webfby 阅读(698) 评论(0) 推荐(0) 编辑
移动端——等分，居中
摘要： 等分1.float采用float的话，就是ul下 给li设置百分比了； .nav-links li{ float:left; width:25%; } .percent-half li{ width:50%; } .percent-third li{ width:33.333%; } ...这个不够... 阅读全文
posted @ 2015-03-24 10:45 webfby 阅读(696) 评论(0) 推荐(0) 编辑
移动端——重置样式
摘要： html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62... 阅读全文
posted @ 2015-03-24 09:40 webfby 阅读(242) 评论(0) 推荐(0) 编辑
M端页面-绝对定位布局
摘要： Document 哈哈哈。我是header 因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很... 阅读全文
posted @ 2015-03-24 09:30 webfby 阅读(723) 评论(0) 推荐(0) 编辑