html5 响应式布局示例

柔光的暖阳◎ 2022-07-14 09:41 174阅读 0赞

# 响应式布局 #

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个 [概念][Link 1]是为解决移动互联网浏览而诞生的。

响应式 [布局][Link 2]可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕 [移动设备][Link 3]的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题

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

就从这个条件语句开始介绍，media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于600小于960的分辨率下所激活的样式表。

html代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <div class="heading"></div>
        <div class="container">
            <div class="left"></div>
            <div class="main"></div>
            <div class="right"></div>
        </div>
        <div class="footing"></div>
    </body>
    </html>

css代码：

*{
        margin: 0px;
        padding: 0px;
    }
    
    .heading,
    .container,
    .footing{
        margin:10px auto;
    }
    .heading{
        height: 100px;
        background-color: chocolate;
    }
    .left,
    .right,
    .main{
        background-color: cornflowerblue;
    }
    .footing{
        height: 100px;
        background-color: #ff0000;
    }
    
    @media screen and (min-width: 960px) {
        .heading,
        .container,
        .footing{
            width: 960px;
        }
    
        .left,
        .main,
        .right{
            float: left;
            height: 500px;
        }
    
        .left,
        .right{
            width: 200px;
        }
        .main{
            margin: 0px 5px;
            width: 550px;
        }
    
        .container{
            height: 500px;
        }
    }
    @media screen and (min-width: 600px) and (max-width: 960px) {
        .heading,
        .container,
        .footing{
            width: 600px;
        }
    
        .left,
        .main{
            float: left;
            height: 400px;
        }
        .right{
            display: none;
        }
        .left{
            width: 160px;
        }
        .main{
            width: 435px;
            margin-left: 5px;
        }
        .container{
            height: 400px;
        }
    }
    @media screen and (max-width: 600px){
        .heading,
        .container,
        .footing{
            width: 400px;
        }
    
        .left,
        .right{
            width: 400px;
            height: 100px;
        }
    
        .main{
            margin-top: 20px;
            width: 400px;
            height: 200px;
        }
    
        .right{
            margin-top: 10px;
        }
    
        .container{
            height: 420px;
        }
    }

[Link 1]: http://baike.baidu.com/view/45333.htm
[Link 2]: http://baike.baidu.com/subview/215902/5079876.htm
[Link 3]: http://baike.baidu.com/view/8323830.htm