码迷,mamicode.com
首页 > 其他好文 > 详细

酷炫的响应式布局

时间:2014-08-25 20:48:24      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   文件   ar   div   

在css文件中可以添加筛选条件,告诉css在何种条件下用何种css代码,这可以用来实现响应式布局。

实现途径有两种,一种是通过控制引入的css文件来实现:

<link type="text/css" rel="stylesheet" href="a.css" media="screen and (min-width:400px)" />

media是条件筛选语句,screen表示媒体类型,and表示并且,min-width:400px表示屏幕大于等于400px的时候引入a.css。

又如

<link type="text/css" rel="stylesheet" href="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 作者的详细讲解!

酷炫的响应式布局

标签:style   blog   http   color   os   io   文件   ar   div   

原文地址:http://www.cnblogs.com/it-snail/p/3935694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!