重慶網(wǎng)絡(luò)公司：目前流行的自適應(yīng)網(wǎng)站建設(shè)，主要針對(duì)網(wǎng)頁(yè)瀏覽器所在設(shè)備（電腦，pad，手機(jī)）的屏幕大小的不同，自動(dòng)調(diào)節(jié)樣式，以實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)在不同尺寸屏幕上都有好的閱讀體驗(yàn)。下面我們來(lái)講講方法。
首先，自適應(yīng)式設(shè)計(jì)要達(dá)到的目的無(wú)疑是非常有價(jià)值的，那么他是如何實(shí)現(xiàn)的呢？原理是利用css3的媒體查詢(Media query)功能，可以根據(jù)設(shè)備尺寸來(lái)加載不同的css樣式。下面我們看如何三步實(shí)現(xiàn)自適應(yīng)瀏覽網(wǎng)頁(yè)的設(shè)備尺寸。
第一步：head標(biāo)簽內(nèi)添加meta viewport標(biāo)簽
移動(dòng)設(shè)備的瀏覽器都可以通過(guò)當(dāng)前屏幕的大小來(lái)自適應(yīng)頁(yè)面的大小。您可以使用viewport meta標(biāo)簽來(lái)重置屏幕的大小。下面的meta標(biāo)簽告訴移動(dòng)瀏覽器使用設(shè)備的寬度來(lái)作為viewport的寬度，不要自動(dòng)做縮放。
如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在ie8和一些老的瀏覽器中需要引用下面的js文件，來(lái)實(shí)現(xiàn)媒體查詢
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
第二步：HTML代碼書(shū)寫(xiě)
如下面例子：有header，content，sidebar，footer；其中header的高度是固定的180px，content區(qū)域是600px，邊欄是300px。
如下圖所示：
第三步：CSS3樣式表
css3的是自適應(yīng)網(wǎng)站的關(guān)鍵因素。你可以使用媒體查詢的特性，來(lái)根據(jù)設(shè)備的寬度，讓頁(yè)面使用不同的css樣式。
如下的css規(guī)則會(huì)在屏幕寬度小于等于980時(shí)起作用：
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
你可以看到在上面的css文件中我將元素的寬度設(shè)置成了百分比，這樣每塊的寬度就都可以根據(jù)屏幕的寬度來(lái)自適應(yīng)了。
下面的css樣式定義適用于屏幕寬度小于等于700像素的設(shè)備，將#content和#sidebar元素的寬度設(shè)置成了auto，float設(shè)置成了none，這樣就可以使內(nèi)容區(qū)和邊欄區(qū)都成了100%寬度，鋪滿屏幕了
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
對(duì)于屏幕尺寸小于480像素的設(shè)備，使用下面的css定義：
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
可以看出來(lái)在屏幕的寬度小于等于480像素的時(shí)候，header的高度會(huì)變?yōu)閍uto，而h1的字體被設(shè)置成了24像素，而邊欄sidebar被隱藏掉了。
當(dāng)然在實(shí)際應(yīng)用中，你可以寫(xiě)出任意多的媒體查詢。所有媒體查詢css規(guī)則可以放在一個(gè)css文件中也可以分單獨(dú)文件來(lái)放置。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
完整的示例html代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo: Responsive Design in 3 Steps</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 36px/100% Arial, Helvetica, sans-serif;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
</div>
<div id="content">
<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
渝公網(wǎng)安備 50010302000872號(hào)