响应式布局

最新推荐文章于 2024-10-09 15:29:03 发布

灯冷晕圆

最新推荐文章于 2024-10-09 15:29:03 发布

阅读量144

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_62312697/article/details/124412790

版权

本文介绍了如何使用HTML5实现响应式布局。通过创建HTML文件，设置带有类名的div，然后添加viewport元标签和媒体查询CSS，实现不同设备上的适配。详细讲解了meta标签的作用以及如何编写响应式CSS，展示了在Web、平板和移动端的显示效果。

摘要由CSDN通过智能技术生成

响应式布局其实不会太难，只是写CSS样式麻烦了点。

首先新建一个HTML文件，写七个div并加上类名，如图

<div class="max">

			<div class="top">
				top
			</div>

			<div id="conter">

				<div class="left">
					left
				</div>

				<div class="conter">
					conter
				</div>

				<div class="right">
					right
				</div>

			</div>

			<div class="buttom">
				bott
			</div>

		</div>

为每个div加上基本样式，效果如下

* {
			margin: 0;
			padding: 0;
		}

		.max {
			width: 100%;
		}

		.top {
			width: 100%;
			height: 120px;
			text-align: center;
			background-color: aquamarine;
		}

		#conter {
			margin-top: 20px;
			width: 100%;
			height: 485px;
		}

		.left {
			float: left;
			width: 20%;
			height: 485px;
			background-color: brown;
		}

		.cont