结一

10个月前
  • 1565

    浏览
  • 1

    评论
  • 0

    收藏

重构不完全教程集之二

本文作者:imweb 结一 原文出处:imweb社区 未经同意,禁止转载

故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》

::before & ::after

相当于多了两个空白标签,可以放置一些修饰的点缀或内容等

伪元素

字体

字体方面主要包括:字体渲染方式,浏览器默认字体及重置,@font-face自定义字体,字体性能等

图片

总得来说,图片的使用分为background和img,而从优化方向来说分为减少请求和减少大小。

图片优化原则:

  1. 能不使用就不使用(使用css3绘制简单的图形等)
  2. 矢量图与位图选择
  3. 挑选合适的图片格式(gif, png, jpg, webp等)及准备不同的规格大小(不同大小或retina屏)
  4. 合并(sprites)与压缩(有损压缩和无损压缩)

资源链接:

svg

目前svg最大的用途在图标及动画,最大的优点在于矢量图,可以任意缩放不失真,而且大小还比较小。

css3 动画

分transition动画和animation动画,前者为两帧动画(只能控制开始和结束),而后者可以对任意帧进行更多处理。

动画库

响应式

响应式主要包括断点的设置,及各种断点情况下样式的改变

如果需要ie8-也支持相应式,得引入js库兼容,如respond.js(不建议ie8去做响应式)

重排与重绘

class命名

注:该系列将会汇总在github上的重构优秀教程合集

1 条评论