身為無線部門人員，不懂移動設備不可；身為無線重構，不會響應式更不可。筆者在最近移動端項目前確不會寫響應式，嚴格說是不合格重構。該項目讓我快速掌握核心方法，以下實戰總結。

響應式頁面定義與起源

一套樣式應對不同分辨率良好呈現。概念源自 Ethan Marcotte《Responsive Web Design》，借鑒響應式建築——物理空間應根據其中人狀態響應調整。

四大關鍵技術組成

1. Viewport Meta 標籤：視口自適應基石

讓 HTML 寬度隨設備分辨率適應可視寬度，可設縮放比例，簡化成比例設備響應式實現：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 流體佈局：百分比與 em 兩大實現路徑

將固定 px 轉為相對單位（%、em），含 margin/padding/left/top 等佈局屬性。

路徑一：百分比（%）佈局

父容器為 100%，子元素按比例換算。係數常帶小數，需耐心。Ethan Marcotte 實戰代碼：

@media screen and (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */ }

路徑二：em 單位佈局

元素 px 值按基準 font-size 換算 em。例：480 分辨率 64px×64px 元素，父 font-size 20px → 3.2em×3.2em。基準字號隨分辨率變化，元素按比例縮放：

同一 3.2em 元素，360px 基準 15px 渲染 48px；480px 基準 20px 渲染 64px。

3. 流體圖片：width:100% 實現自適應

不設固定寬高，賦予 width: 100% 即可隨父容器調整。擔心拉伸失真時，可不同分辨率提供不同圖片。

4. 媒體查詢：分辨率條件下的樣式精準調適

@media screen and (max-device-width: 480px) {
.column { float: none; }
}

百分比佈局可無需媒體查詢自適應；em 佈局必須配合媒體查詢調整基準字號。實戰策略：先在某分辨率完美重構 → 所有尺寸換算為 em → 媒體查詢調不同分辨率基準 font-size。另可微調不同分辨率下具體表現。

實戰代碼：基準字號分級調適

body, section, button, h1, p, .layer, .downall_btn, .introduce, .playlist, .recom_picbox { font-size: 20px; }
/* for 800 px */
@media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {
body, section, button, h1, p, .layer, .downall_btn, .introduce, .playlist, .recom_picbox { font-size: 33.34px; }
}
/* for 720 px */
@media only screen and (max-device-width: 720px), only screen and (max-width: 720px) {
body, section, button, h1, p, .layer, .downall_btn, .introduce, .playlist, .recom_picbox { font-size: 30px; }
}

通用 20px 為 480px 基準；800px 下 33.34px、720px 下 30px，按分辨率比例換算。其他分辨率同理。

原文鏈接：https://cued.xunlei.com/log057

掌握四大技術，響應式開發其實不難。動手實踐，方悟奧義！