H5学习之响应式布局

最新推荐文章于 2023-06-15 13:54:22 发布

汤米粥

最新推荐文章于 2023-06-15 13:54:22 发布

阅读量3k

点赞数

分类专栏： android Html5 H5 响应式布局文章标签： H5 Html5 响应式布局

本文链接：https://blog.csdn.net/nnmmbb/article/details/76623360

版权

android 同时被 3 个专栏收录

304 篇文章 4 订阅

订阅专栏

Html5

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

相应式布局主要是通过控制屏幕宽度来执行不同的css文件:

@media screen and (min-width:1800px){ }

@media screen and (max-width:1800px){ }

@media screen and (max-width:991px) { }

@media screen and (max-width:768px){ }

下面我写了一个简单的示例，通过调整浏览器（或手机屏幕尺寸）自动调整布局和背景颜色。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>响应式布局</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

 @media screen and (min-width:1800px){

	  body{
		background:#3366ff;
		margin:0px auto;
		padding:20px;
	 }

	 #left{
		width:49%;
		border:1px solid #ffffff;
		float:left;
		display:inline;
		color:#ffffff;
	 }

	  #right{
		width:49%;
		border:1px solid #ffffff;
		float:right;
		display:inline;
		color:#ffffff;
	 }


 }

 @media screen and (max-width:1800px){

	  body{
		background:#893432;
		margin:0px auto;
		padding:20px;
	 }

	 #left{
		width:49%;
		border:1px solid #ffffff;
		float:left;
		display:inline;
		color:#ffffff;
	 }

	  #right{
		width:49%;
		border:1px solid #ffffff;
		float:left;
		display:inline;
		margin-left:10px;
		color:#ffffff;
	 }
 }

  @media  screen and (max-width:991px){

	  body{
		background:#893772;
		margin:0px auto;
		padding:20px;
	 }

	 #left{
		width:49%;
		border:1px solid #ffffff;
		float:left;
		display:inline;
		color:#ffffff;
	 }

	  #right{
		width:49%;
		border:1px solid #ffffff;
		float:left;
		display:inline;
		margin-left:10px;
		color:#ffffff;
	 }
 }

  @media  screen and (max-width:768px){

	  body{
		background:#333432;
		margin:0px auto;
		padding:20px;
	 }

	 #left{
		width:96%;
		border:1px solid #ffffff;
		display:block;
		margin:20px auto;
		float:none;
		color:#ffffff;

	 }

	 #right{
		width:96%;
		border:1px solid #ffffff;
		margin:0px auto;
		display:block;
		float:none;
		color:#ffffff;
	 }
 }

 li{
	margin-bottom:20px;
 }

 #header{
	color:#ffffff;
	margin:0px auto 20px auto;
	text-align:center;
	font-size:40px;
	font-weight:bold;
 }

</style>
</head>
<body>

<div id="header">新闻头条</div>

<div id="left">
    <ul>
        <li>热议话题虎嗅热议：如何看待每到年终的巨额“奖励”，鼓励or噱头？</li>
        <li>特朗普总统就职典礼的音乐会，有人演出，有人不来</li>
        <li>郭台铭计划全球各处密集建厂，心急可吃不了热豆腐</li>
        <li>我为什么特别讨厌贾跃亭？</li>
        <li>发达社会的诅咒：香港互联网停滞的五年</li>
        <li>一家卖香蕉的公司，赞助了10年东京马拉松</li>
        <li>百度任命陆奇为集团总裁兼COO，这可能是李彦宏最正确的决定</li>
        <li>三个人与共享单车的故事</li>
    </ul>

</div>
<div id="right">
    <ul>
        <li>热议话题虎嗅热议：如何看待每到年终的巨额“奖励”，鼓励or噱头？</li>
        <li>特朗普总统就职典礼的音乐会，有人演出，有人不来</li>
        <li>郭台铭计划全球各处密集建厂，心急可吃不了热豆腐</li>
        <li>我为什么特别讨厌贾跃亭？</li>
        <li>发达社会的诅咒：香港互联网停滞的五年</li>
        <li>一家卖香蕉的公司，赞助了10年东京马拉松</li>
        <li>百度任命陆奇为集团总裁兼COO，这可能是李彦宏最正确的决定</li>
        <li>三个人与共享单车的故事</li>
    </ul>
</div>

</body>
</html>

效果图: