html5 响应式布局示例

最新推荐文章于 2024-07-28 09:00:00 发布

俊刚、

最新推荐文章于 2024-07-28 09:00:00 发布

阅读量8.5k

点赞数 3

分类专栏： 2020以前文章标签：响应式布局 html css3

本文链接：https://blog.csdn.net/csdn9_14/article/details/53471356

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

响应式布局

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

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

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

@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;
    }
}