7C00.ME/houmu 2013-06-02

html5和css3媒体查询

媒体查询使用方法

媒体类型

媒体查询可用特性

除scan和grid外,可用max和min创建查询范围

设置viewport

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- suggested -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

css 网格系统

Semantic Skeleton less Framework 1140 CSS Grid Columal

腻子脚本和Modernizr

html5样板文件

http://html5boilerplate.com

http://caniuse.com http://gs.statcounter.com

css 分栏

column-width column-count column-gap column-rule: thin dotted #999

文字换行

word-wrap: break-word;

http://fico.lenso.be

css animation

transition

transition-property: background-color\text-shadow\all transition-duration: 2s/1.5s/.3s transition-timing-functionn: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier transition-delay: 0s/1s

cubic-bezier.com

css-tricks.com

transform

scale(0.5) translate(40px, 0px) rotate(90deg) skew(10deg) matrix

弹性布局、弹性元素、媒体查询