設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的解析度為1024px，那麼我們設定寬為980px），然後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的解析度小於1024px的時候，則通過Media Query預設的樣式表來將頁面的寬度設定為百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如為650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子：

/*在CSS裡新增如下示例程式碼*/

/* 當瀏覽器的可視區域小於980px */
@media screen and ( max-width: 980px ) 
 
{
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 當瀏覽器的可視區域小於650px */
@media screen and ( max-width: 650px ) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float
 
: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}

/*顯示的表格部份也可以這樣定義*/
table{margin:0 auto;font-size:12px;width:98%;}
table{border-left:1px solid #a2c6d3;border-top:3px solid #0180CF;}
table td{border-right:1px solid #a2c6d3;border-bottom:1px solid #a2c6d3;}
table td{padding:2px 4px;word-wrap
 
:break-word;word-break:break-all;min-width:88px;}
.tt{background:#e5f2fa;line-height:18px;font-weight:bold;FONT-SIZE:12px;max-width:596px;}
table.ss{border:1px solid #000;border-spacing:inherit;border-collapse:collapse;}
.ss td{border:1px solid #000;border-spacing:inherit;border-collapse:collapse;}
/* 當瀏覽器的可視區域小於650px */
@media screen and (max-width: 650px) {
table{border:0;border-top:0px solid #0180CF;}
table thead {display:none;}
table tr{margin-bottom:18px;display:block;border-top:2px solid #0180CF;}
table tr{border-bottom:1px solid #0180CF;}
table td {display:block;text-align:left;font-size:12px;}
table td {border-left:1px dotted #0180CF;border-bottom: 1px dotted #ccc;}
table td:last-child {border-bottom:0;}
table td:before {content:attr(data-label);float:left;text-transform:uppercase;}
table td:before {font-weight:bold;color:red;margin:0px 6px;}
}