css 优化
Css进阶
1 兼容性
目标:让web在不同场景(设备，浏览器，分辨率)下有更好的体验
理解:一致性(感性) 渐进增强&优雅降级
方法:Doctype,Hack,浏览器私有属性，响应式
<!--[if !supportLists]-->1.1 <!--[endif]-->兼容性
告诉浏览器当前是什么类型的html文档
一定要写，无doctype,IE下启动怪异模式
Html5:<!DOCTYPE html>
<!--[if !supportLists]-->1.2 <!--[endif]-->css Hack
定义：通过在css声明中添加特殊字符，对不同浏览器做单独声明
慎用，除非是某个浏览器的可用性问题
1.3浏览器私有属性
-moz- firefox
-webkit -chrome,safari
-0- opera
-ms- IE
1.4 响应式
背景 智能手机以及平板电脑的爆发，屏幕分辨率的泛滥
争论：响应ＶＳ定制
思路： 布局响应式 ＋组件适应性
实现： media query
性能
样式文件
位置尽量放在<head>里
至少放在要定义的机构墙面
合并，压缩
选择器
查询解析顺序：从右向左
所以少用标签选择器结尾
少用后代选择器多用子选择器（.list>li 优于 .list li）
减少层级
避免冗余
属性
多用简写
多利用属性继承
背景图片合并
少用css expression
维护性
Less ,sass
规划:reset ,base ,layout,mods ,compnents theme
避免就一个main.css
按页面分文件，共用的部分提出来，@import(less) 进来
库(bootstrap ,bui ,xmixins)
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT