当你们设计不够给力的时候,以下的css 技巧能够有效的帮助你提高工作效率.
一 尽量减少重复的代码
+ 当某些值相互依赖时,需要把这种关系表示出来.
如: font-size 和line-height 之间的关系
em 为单位,适用于父的字号大小,但是需要注意的一点并不是所有的效果都需要跟着组件变化.
%为单位,表现与父盒子之间的关系.
rem 为单位,结合媒体查询,适用于移动端适配.
+ 代码易维护 VS. 代码量, 两者不可兼得
如: { border- 1px 0 1px 1px } => {border-1px; border-left-widht:0} 后者比前者易维护,但是多一行代码, 我更习惯用后者.
+ currentColor 颜色 ,
currentColor颜色可以保持和文本颜色一致的颜色.
+继承
inherit 关键字,对于 input select button 表单元素设定和 其他部分字体设置一致 {font-size:inherit}, inherit关键字基本可以应用所有的属性
二 数字 ≠ 视觉效果
+ 在矩形的盒子 数字的中心并不是视觉上的中心. 视觉的中心一般要偏上一点.
+ 相同 宽度的正方形看着比圆形要打
三 响应式布局
+ 滥用媒体查询(@media)
1 媒体查询比较消耗性能
2 滥用媒体查询会增加我们的修改成本.
+ 响应式网页技巧
如: 使用百分比布局 或者与视口相关的单位 (vw,vh,vmin,vmax——必须给body 设定宽高 100%否则可能取不到)
max-width 有利于适应小屏幕
当使用{background-size:cover}的时候,应该考虑带宽问题, 尽量使用合适大小的图片,而不是使用css 吧图片放大缩小
使用弹性盒{display:flex}布局 、行内块 {display:inline-block}、 浮动{float:left} 能更好的处理适配中的文字问题
四 合理使用简写
五 预处理器(less ,sass,stylus,等)
预处理器写代码是很爽, 但是也不是一点问题没有
1/ 预处理语言目前种类比较多,每加入一个协作者,都要进行学习和培训
2/ 抽象泄漏法则：“所有重大的抽象机制在某种程度上都存在泄漏的情况。”
六 calc(100%-40px)函数