浅谈响应式布局

来源：互联网发布：采购数据分析编辑：程序博客网时间：2024/06/06 14:06

随着大屏幕的移动设备越来越普及，对于网站实现兼容各个终端设备又有了更多的需求。

现在CSS3有了实用的 media query即媒介查询。应用这个属性，就可以做到响应式布局了。

这里，我具体做了一个最简单的响应式布局例子，最后奉上代码。

不过首先要知道响应式布局有哪些优点和缺点。

响应式布局的优缺点

优点：

　　面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题　　

缺点：

　　兼容各种设备工作量大，效率低下

　　代码累赘，加载时间加长

　　一定程度上改变了网站原有的布局结构

media query的用法

值描述all默认。适合所有设备。aural语音合成器。braille盲文反馈装置。handheld手持设备（小屏幕、有限的带宽）。projection投影机。print打印预览模式/打印页面。screen计算机屏幕。tty电传打字机以及使用等宽字符网格的类似媒介。tv电视类型设备（低分辨率、有限的分页能力）。

下面就是具体做个例子解释

@media screen and (min-width:600px) and (max-width:960px)；

screen 媒体类型（上面的媒体类型之一）。然后用 and 关键字来连接条件。最小宽度600px。最大宽度960px。

如果在link中使用的话，就要这样用了

<link rel=“stylesheet” type=“text/css” media="screen and (min-width:600px) and (max-width:960px)" href="css/600px-960px.css"/>

上面的语句，就是响应式布局的基础。在判断终端分辨率大小之后，赋予不同的样式进去。

当然，在网页中还有图片，视频。

弹性图片和视频

我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。

img {    max-width: 100%;    height: auto;}

对于视频我们也需要做max-width: 100%的设置。

.video embed, .video object, .video iframe {     width: 100%;     height: auto; }

兼容IE9

一般在移动终端上，很少会有IE9及以下浏览器的，如果有特殊需要的话，需要加上这句代码

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

下面一个简单的响应式布局例子双手奉上：

响应式布局实例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>响应式布局</title>    <style type="text/css">        .header,.content,.footer{            margin-top: 10px;            text-align: center;            margin-left:auto;            margin-right:auto;        }        .header,.footer{            height: 100px;            background-color: cornflowerblue;        }        .left,.main,.right{            background-color: cornflowerblue;        }        @media screen and (min-width:960px){            .header,.content,.footer{                width:960px;            }            .content{                height: 400px;            }            .left,.right{                width: 200px;            }            .main{                margin: 0 10px 0 10px;                width: 540px;            }            .left,.main,.right{                height: 400px;                float: left;            }        }        @media screen and (min-width:600px) and (max-width:960px){            .header,.content,.footer{                width:600px;            }            .content{                height: 400px;            }            .left{                width: 200px;            }            .right{                display: none;            }            .main{                margin: 0 0 0 10px;                width: 390px;            }            .left,.main{                height: 400px;                float: left;            }        }        @media screen and (max-width:600px){            .header,.content,.footer{                width:400px;            }            .content{                height:420px;            }            .left,.right{                width:400px;                height:100px;            }            .main{                margin-top:10px;                width:400px;                height:200px;            }            .right{                margin-top:10px;            }        }    </style></head><body>    <div class="header">头部</div>    <div class="content">        <div class="left">左边</div>        <div class="main">主要部分</div>        <div class="right">右边</div>    </div>    <div class="footer">页脚</div></body></html>

0 0