您的位置：首页 > 运维架构 > 网站架构

使用CSS3属性（@media）制作网站响应式布局

2017-03-22 23:51 585 查看

使用CSS3属性（@media）制作网站响应式布局。

随着前端技术发展越来越成熟，移动H5也突出了重要的地位。作为在攻城界摸爬滚打小生写了个demo,提供个给大家学习，对于要求不高的网站开发可以考虑使用使用@meida 属性开发自己的一个移动PC 响应式网站。

pc一可分为：头部，左侧，中部，右侧以及底部，移动一般纵向模式居多，以下符上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>使用</title>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
</head>
<style type="text/css">
html {height: 100%;width: 100%;}
body{margin: 0;height: 100%;width: 100%;}
/*全局样式*/
#total {
overflow: hidden;
height: 100%;
width: 100%;
}
.groudBox {
float: left;
}
/*头部样式*/
.groudHead {
height: 2em;
line-height: 2em;
background-color: #CCCCCC;
text-align: center;
color: white;
font-size: 1.4em;
width:100%;
}
/*左侧样式*/
.groudLeft {
background: #a9ccef;
width: 20%;
height: 75%;
text-align: center;
}
/*中部样式*/
.groudMiddle {
background: #ff9f9f;
width: 50%;
height: 70%;
margin-left: 5%;
margin-top: 2.5%;
text-align: center;
}
/*右侧样式*/
.groudRight {
width: 20%;
background: #93ffc9;
height: 75%;
float: right;
text-align: center;
}
/*底部样式*/
.groudBotton {
position: absolute;
bottom: 0;
width: 100%;
height: 10%;
background: #CCC;
}
.groudBotton .botton {
text-align: center;
margin-top: 2.5%;
}
@media only screen and (max-width: 500px) {
/*左侧内容调整*/
.groudLeft{
width: 100%;
height: 20%;
}
/*中部内容调整*/
.groudMiddle {
margin: 0;
width: 100%;
height: 30%;
margin-top: 5%;
}

/*右侧内容调整*/
.groudRight {
width: 100%;
height: 20%;
margin-top: 5%;
}

}
</style>
<body>
<div id="total">
<!--头部-->
<div class="groudBox groudHead">
<div class="header">网页响应式设计（头部）</div>
</div>

<div class="groudBox groudLeft">
<div class="left">
左侧(20%,75%)
</div>
</div>

<div class="groudBox groudMiddle">
<div class="middle">
中部(40%,70%)
</div>
</div>

<div class="groudBox groudRight">
<div class="right">
右侧(20%,75%)
</div>
</div>

<div class="groudBox groudBotton">
<div class="botton"> http://blog.csdn.net/china_guanq </div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 响应式移动布局

相关文章推荐

新的分享

章节导航