响应式布局

响应式布局这点小事： CSS3媒体查询，插入@media【only,not,and,{}】

简单的试验田就是：

?

1 2 3 4 5

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   <style type="text/css" media="only screen and (max-width:719px) and (min-width: 500px)">body{background: red;}</style> <style type="text/css" media="only screen and (max-width:499px)">body{background: green;}</style> <script type="text/javascript">

附上相关链接：

折腾响应式布局  

响应式web设计流程