小谈css响应式局

小生本着一副学习的姿态，抛'码'引玉,希望各位老大多多指教，多多找我bug!

平时做响应式布局，真的是特烦的一件事（心想：哪来的那么屏幕尺寸啊，为了饭锅，硬着头皮也要写）；

不多说了，撸起码来吧： 

1）先写meta 标签 <meta name='viewport' content='width=device-width,initial-scale=1'>，关于标签的内容，度娘能给你100种答案，本人理解，不让用户缩放而已；

2) 通过link 标签引入不同尺寸的css文件，例如：

大于960px <link rel=stylesheet type='text/css' media="screen and (min-width:960px)" href='xxx.css' >

介于600px ~ 960px <link rel=stylesheet type='text/css' media='screen and (min-width:600px) and (max-width:960px) href="xxx.css">

小于600px <link rel=stylesheet type="text/css" media="screen and (max-width:600px) href="xxx.css" >;

3）定义div 尺寸的时候，本人喜欢rem为单位，em可能都知道，据说rem:也很好理解，root （根html）+em，即是html的font-size，假如 html {font-size:16px;} ；那么 div { width：2rem; };2 * 16px = 32px ;

结束语：人丑多读书，体胖多运动！