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

最新推荐文章于 2024-06-07 19:37:27 发布

雷斯巴能

最新推荐文章于 2024-06-07 19:37:27 发布

阅读量1.3k

点赞数

分类专栏： CSS - CSS3 文章标签： css3 响应式移动布局

本文链接：https://blog.csdn.net/China_Guanq/article/details/65079162

版权

CSS - CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用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>

在这里插入图片描述

雷斯巴能

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用CSS3属性（@media）制作网站响应式布局

使用CSS3属性（@media）制作网站响应式布局。随着前端技术发展越来越成熟，移动H5也突出了重要的地位。作为在攻城界摸爬滚打小生写了个demo,提供个给大家学习，对于要求不高的网站开发可以考虑使用使用@meida 属性开发自己的一个移动PC 响应式网站。 pc一可分为：头部，左侧，中部，右侧以及底部，移动一般纵向模式居多，以下符上代码。<!DOCTYPE html><html><hea
复制链接

扫一扫