CSS实现响应式布局的方法详解使用CSS3的@media来编写响应式的页面 css3 media 响应式布局的简单实例响应式设计你需要了解的知识点css3media响应式布局实例像素密度与CSS3的viewport在移动端Web响应式布局中的运用使用CSS3的rem属性制作响应式页面布局的要点解析自适应屏幕的CSS响应式布局设计技巧总结使用CSS媒体查询创建响应式布局教程支持IE8的纯css3开发的响应式设计动画菜单教程css3的@media属性实现页面响应式布局示例代码

 @media 类型 and (条件1) and (条件二){ css样式 } @media screen and (max-width:1024px) { body{ background-color: red; } }

 @import url("css/moxie.css") all and (max-width:980px);

头部
左边
中间
右边
底部

 *{ margin:0; padding:0; text-align:center; color:yellow; } .header{ width:100%; height:100px; background:#ccc; line-height:100px; } .main{ background:green; width:100%; } .clearfix:after{ display:block; height:0; content:""; visibility:hidden; clear:both; } .left,.center,.right{ float:left; } .left{ width:20%; background:#112993; height:300px; font-size:50px; line-height:300px; } .center{ width:60%; background:#ff0; height:400px; color:#fff; font-size:50px; line-height:400px; } .right{ width:20%; background:#f0f; height:300px; font-size:50px; line-height:300px; } .footer{ width:100%; height:50px; background:#000; line-height:50px; }

 .right{ float:none; width:100%; background:#f0f; clear:both; } .left{ width:30%; } .center{ width:70%; } .main{ height:800px; }

 .left,.center,.right{ float:none; width:100%; }