您的位置：首页 > Web前端 > CSS

css 优化

2015-10-08 17:40 531 查看

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)

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航