在css文件中可以添加筛选条件,告诉css在何种条件下用何种css代码,这可以用来实现响应式布局。
实现途径有两种,一种是通过控制引入的css文件来实现:
<link type="text/css" rel="stylesheet" href="a.css" media="screen and (min-400px)" />
media是条件筛选语句,screen表示媒体类型,and表示并且,min-400px表示屏幕大于等于400px的时候引入a.css。
又如
<link type="text/css" rel="stylesheet" href="b.css" media="screen and (max-800px) and (min-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-400px) and (max-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-980px) { .left{ float:left; width: 33%; height: 600px; } .right{ float:left; width: 33%; height: 600px; } .middle{ float:left; width: 33%; height: 600px; } } @media (max-980px) and (min- 600px) { .left, .middle{ float:left; width: 50%; height: 600px; } .right{ width: 100%; height: 600px; float: left; } } @media (max- 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 作者的详细讲解!