利用css写响应式布局

最新推荐文章于 2024-08-18 11:06:22 发布

mask天俊

最新推荐文章于 2024-08-18 11:06:22 发布

阅读量1.7k

点赞数

分类专栏： css响应式布局文章标签：响应式 css 布局

本文链接：https://blog.csdn.net/u013107927/article/details/47110985

版权

css响应式布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近才接触到响应式布局的概念，之前用到的bootstrap就是一种响应式布局的框架。学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章。

简单记录一下用css写响应式布局的方法。大概可以这么理解，通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的。

首先先贴一个html，css都放在同级的css文件夹下面，因为有个简单的轮播，所以要引入jquery。

<!DOCTYPE html>
<html>
	<head> 
	<link rel="stylesheet" type="text/css" href="./css/initstyle.css">
	<link rel="stylesheet" type="text/css" href="./css/media-requeries.css">
	<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<div id="pagewhole">
			<header>	
				<h1>my website</h1>
				<div id="banner">
			    	<ul id="banner_img">
			                <li><img src="./img/1.jpg"/></li>
			                <li><img src="./img/2.jpg"/></li>
			                <li><img src="./img/3.jpg"/></li>
			                <li><img src="./img/4.jpg"/></li>
			        </ul>
			    </div>
			    <nav>   
		            <ul id="main-nav">   
		                <li><a href="#">Home</a></li>   
		                <li><a href="#">Home</a></li>   
		                <li><a href="#">Home</a></li>   
		            </ul>   
		            <form style="float:right;">
		            	<input type="text" name="search" />
		            	<input type="button" name="submit" value="search" />
		            </form>
		        </nav>     
		        <div id="clear" style="clear:both;"></div>
		    </header>
		    <div id="content">
		    	<article>
		    		blog post
		    	</article>
		    </div>
		    <aside id="sidebar">
		    	<section class="widget">   
             		widget   
        		</section>  
		    </aside>
		    <footer id="footer">
		    	foot
		    </footer>
        </div>
	</body>
	<script type="text/javascript">
	 var time = "";
         var index = 2;
 		 setInterval(showimg,3000);
         function showimg() {
             //$(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
             var curli = $("#banner_img li") ;
             curli.fadeOut("slow") ;
             curli.eq(index-1).fadeIn("slow");
             index = index + 1 > 4 ? 1 : index + 1;
            // time = setTimeout("showimg(" + index + ")", 3000);
         }   
	</script>
</html>

注意两个外部css引入的先后顺序很重要，如果弄反了会导致css冲突
然后上我随便写的css样式：

initstyle.css

		*{
			padding: 0px ;
			margin: 0px ;
		}
		header{
			margin-top: 20px ;
			margin-bottom: 20px ;
		}
		article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    
	    	display: block;   
		}
		#pagewhole{
			margin: 0 auto ;
			max-width: 960px ;
		}
		#banner{
			overflow: hidden;
			height: 200px;
			border-radius: 10px;
		}
		#content {   
		    width: 600px;   
		    height: 600px ;
		    float: left;   
		    border:3px solid #B6B6B6 ;
		}   
		#sidebar {   
		    width: 280px;   
		    height: 300px ;
		    float: right;   
		    border:3px solid #B6B6B6 ;
		}   
		    
		#footer {   
		    clear: both;   
		    height: 20px ;
		} 
		#main-nav li{
			float: left;
			list-style-type:none;
			display: block;
			width: 50px;
		}
		#banner li{
			float: left;
		}

media-queries.css

@media screen and (max-width: 960px){
	#pagewhole{
		width: 95% ;
	}
	#content{
		width: 60% ;
		padding: 3% 4% ;
	}
	#sidebar{
		width: 30% ;	
	}
}
@media screen and (max-width: 650px){
	header{
		height: auto ;
	}
	#content{
		width: auto;
		float: none;
		margin: 20px 0 ;
	}
	#sidebar{
		width: 100% ;
		float: none;
		margin: 0 ;
	}
}
@media screen and (max-width: 480px) {   
    
    html {   
        -webkit-text-size-adjust: none;   
    }   
    
    #main-nav a {   
        font-size: 90%;   
        padding: 10px 8px;   
    }   
    
}

这个css是关键，就是靠他来判断浏览器的宽度变换的，你问我为啥选那几个宽度？960px是因为一般网页内容都是960px，480px是因为iphone的宽度是480px，中间的那个不懂。。

这是一些响应式可能需要的meta

http://www.uisdc.com/mobile-phone-terminal-meta

响应式网站  得记住几点（我的师傅说哒）
如果不是100%宽度的网站定义父框架的 div  必须要带max-width 跟 width
所有的网页图片要切成2倍大小，即如果psd里100*100的图片   要切成200*200的
在手机端就算是你写了 display:none  dom元素中的css 手机还是会加载如果css 里你设置了一张大的背景图片   手机还是会加载这张图片这时候就需要jq   removed() 来移除 div