如何理解BootStrap的响应式开发框架

大家写的网页需要在不同的设备来浏览，也包括同一设备的不同的浏览器大小，所以，开发一个响应式网站是很有必要的，接下来，我会简单的谈谈如何开发一个响应式的界面

1.不可以使用绝对宽度的布局和元素，例如 width：940px是不可以的，可以设置为width：auto（自适应）或者width：100%。

对于字体，使用相对单位em。em是相对“当前页面”的字体大小而言的，比如默认字体大小是16px，实现首行缩进就可以写，text-indent：2em；

接下来是详细的代码和注释

<!--将页面设置为四部分-->
<div id="pagewrap">    
			<div id="header">
				<h1>这里是页面的头部区</h1>
			</div>
			<div id="content">
				<h2>中间的主体内容区</h2>
				<p>text</p>
				<p>text</p>
				<p>text</p>
				<p>text</p>
				<p>text</p>
			</div>
			<div id="sidebar">
				<h3>侧边栏</h3>
			</div>
			<div id="footer">
				<h2>页脚</h4>
			</div>
		</div>

接下来为四个部分简单的设置边框背景颜色等等，此处略去css代码。

接下来是为屏幕设置三个宽度样式，

/*max-width代表在最大980px的宽度下使用这个css布局*/
@media screen and (max-width: 980px) {  
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}

}

/*max-width代表在最大700px的宽度下使用这个css布局*/
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

/*max-width代表在最大400px的宽度下使用这个css布局*/
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}

页面大的时候的浏览效果

当缩小屏幕后的效果

在实际的开发中，可以更多的支持移动设备