重慶網(wǎng)絡(luò )公司：目前流行的自適應網(wǎng)站建設，主要針對網(wǎng)頁(yè)瀏覽器所在設備（電腦，pad，手機）的屏幕大小的不同，自動(dòng)調節樣式，以實(shí)現同一個(gè)網(wǎng)頁(yè)在不同尺寸屏幕上都有好的閱讀體驗。下面我們來(lái)講講方法。
首先，自適應式設計要達到的目的無(wú)疑是非常有價(jià)值的，那么他是如何實(shí)現的呢？原理是利用css3的媒體查詢(xún)(Media query)功能，可以根據設備尺寸來(lái)加載不同的css樣式。下面我們看如何三步實(shí)現自適應瀏覽網(wǎng)頁(yè)的設備尺寸。
第一步：head標簽內添加meta viewport標簽
移動(dòng)設備的瀏覽器都可以通過(guò)當前屏幕的大小來(lái)自適應頁(yè)面的大小。您可以使用viewport meta標簽來(lái)重置屏幕的大小。下面的meta標簽告訴移動(dòng)瀏覽器使用設備的寬度來(lái)作為viewport的寬度，不要自動(dòng)做縮放。
如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在ie8和一些老的瀏覽器中需要引用下面的js文件，來(lái)實(shí)現媒體查詢(xú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區域是600px，邊欄是300px。
如下圖所示：
第三步：CSS3樣式表
css3的是自適應網(wǎng)站的關(guān)鍵因素。你可以使用媒體查詢(xún)的特性，來(lái)根據設備的寬度，讓頁(yè)面使用不同的css樣式。
如下的css規則會(huì )在屏幕寬度小于等于980時(shí)起作用：
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
你可以看到在上面的css文件中我將元素的寬度設置成了百分比，這樣每塊的寬度就都可以根據屏幕的寬度來(lái)自適應了。
下面的css樣式定義適用于屏幕寬度小于等于700像素的設備，將#content和#sidebar元素的寬度設置成了auto，float設置成了none，這樣就可以使內容區和邊欄區都成了100%寬度，鋪滿(mǎn)屏幕了
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
對于屏幕尺寸小于480像素的設備，使用下面的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的字體被設置成了24像素，而邊欄sidebar被隱藏掉了。
當然在實(shí)際應用中，你可以寫(xiě)出任意多的媒體查詢(xún)。所有媒體查詢(xún)css規則可以放在一個(gè)css文件中也可以分單獨文件來(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號