利用css写响应式布局

青旅半醒 2022-08-03 00:28 124阅读 0赞

最近才接触到响应式布局的概念，之前用到的bootstrap就是一种响应式布局的框架。学习的时候参考了[http://blog.csdn.net/shoyer/article/details/8293011][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][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

[http_blog.csdn.net_shoyer_article_details_8293011]: http://blog.csdn.net/shoyer/article/details/8293011
[http_www.uisdc.com_mobile-phone-terminal-meta]: http://www.uisdc.com/mobile-phone-terminal-meta