布局.md

布局

响应式布局概念

见 知乎

传统的百分比布局

Media Query

• http://www.w3.org/TR/css3-mediaqueries/

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

• http://www.qianduan.net/media-type-and-media-query.html

CSS Grid Layout Module（网格布局）

注意：目前（2013-11-29）网格布局的规范还不是很稳定，而且浏览器支持还比较差。

有点像表格，但用一种更加CSS和更加优雅的方式来写。

• http://www.w3.org/TR/css3-grid-layout/

see Example 2

• http://www.w3cplus.com/css3/css3-grid-layout.html

• http://msdn.microsoft.com/zh-cn/library/ie/hh673533\(v=vs.85\).aspx

• http://caniuse.com/#feat=css-grid

CSS Flexible Box Layout

• http://www.w3.org/TR/css3-flexbox/

see Example 1, 4, 6

• http://caniuse.com/#feat=flexbox

Javascript 控制

$(window).on('resize', callback);

Less

less.modifyVars()

px? vw? vh? em? rem?