首页 » HTML5 » H5学习之 响应式布局

H5学习之 响应式布局

原文 http://blog.csdn.net/nnmmbb/article/details/76623360

2017-08-03 16:20:10阅读(592)

相应式布局主要是通过控制屏幕宽度来执行不同的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>

效果图:

H5学<a href=习之 响应式布局" src="http://img.blog.csdn.net/20170803152919641?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbm5tbWJi/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

H5学习之 响应式布局H5学习之 响应式布局

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹