首页 > 代码库 > 酷炫的响应式布局
酷炫的响应式布局
在css文件中可以添加筛选条件，告诉css在何种条件下用何种css代码，这可以用来实现响应式布局。
实现途径有两种，一种是通过控制引入的css文件来实现：
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/a.css" media="screen and (min-width:400px)" />
media是条件筛选语句，screen表示媒体类型，and表示并且，min-width:400px表示屏幕大于等于400px的时候引入a.css。
又如
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/b.css" media="screen and (max-width:800px) and (min-width:400px)" />
表示屏宽在400px和800px之间时引入b.css
媒体类型css2中给出了十种，screen表示彩色电脑屏幕，具体可见http://www.w3.org/TR/CSS2/media.html#media-types，列举如下：
all 所有设备
aural 听觉设备
braille 点字触觉设备
handle 便携设备，如手机，平板电脑
print 打印预览图等
projection 投影设备
screen 显示器、笔记本等
tty 如打字机等终端设备
tv 电视机等
embossed 盲文打印机
and表示条件关系，表示并且，另外还有not（排除某种设备），only（限定某种设备）
第二种方法是在css文件中写入，关键字是@media，@media之后为条件选择语句，例如：
@media (min-width:400px) and (max-width:800px){
.left{
float:left;
}
}
表示在屏宽介于400px和800px之间时.left有float:left的属性。
另附demo：
<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.11.1.js"></script> <style> .left{ background: lightcoral; } .right{ background: lightgoldenrodyellow; } .middle{ background: lightsalmon; } @media (min-width:980px) { .left{ float:left; width: 33%; height: 600px; } .right{ float:left; width: 33%; height: 600px; } .middle{ float:left; width: 33%; height: 600px; } } @media (max-width:980px) and (min-width: 600px) { .left, .middle{ float:left; width: 50%; height: 600px; } .right{ width: 100%; height: 600px; float: left; } } @media (max-width: 600px){ .left, .middle, .right{ width: 100%; float: left; height: 200px; } } </style></head><body><div class="left"></div><div class="middle"></div><div class="right"></div></body></html>
最后，感谢http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 作者的详细讲解！
酷炫的响应式布局