隨著網絡的快熟發展，越來越多的人使用手機上網。移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上，有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事。很多網站的做法是對不同終端設計多個網頁，但這樣會有很多維護的問題，在這裡我們可以設計一個簡單的盒子，這個盒子可以識別不同的終端而顯示不同的效果
工具/原料
dm網頁設計軟件
ps圖像處理軟件
在網頁代碼的頭部，加入一行viewport元標簽。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。對圖像來說也是這樣。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
例如：
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
流動布局（fluid grid）
"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動探測屏幕寬度，然後加載相應的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
一個例子：
http://hovertree.com/texiao/css3/2/
例子代碼如下：
<!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>
<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://hovertree.com">Web Designer Wall</a> (read <a href="http://hovertree.com/h/bjaf/uhbqpaak.htm">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>textg</p>
<p>myslider</p>
<p>easysector</p>
<p>何問起</p>
<p>hovertreeimg</p>
<p>何問起</p>
<p>hovertree</p>
<p>keleyi</p>
<p>yestop</p>
<p>text</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>