首先，在網頁**的頭部，加入一行viewport標籤。
所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器（主要是ie6、7、8），需要使用css3-mediaqueries.js。
width: xx%或者width:xxem;使用相對大小的字型em或者rem。一般瀏覽器的預設字型大小為16px。「em」是乙個相對的大小，其參考物指的是相對於元素父元素的font-size。因此，1em總是等於父元素的字型大小。而rem總是相對於根元素的字型大小進行計算的。
1.設定百分比時的計算
相對于父元素寬度的：[max/min-]width、left、right、padding、margin 等；
相對于父元素高度的：[max/min-]height、top、bottom 等；
相對於繼承字型大小的：font-size 等；
相對於自身字型大小的：line-height 等；
相對於自身寬高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊演算法的：background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、filter 系列函式等；
如果自身設定 position: absolute，則相對於離它最近的那個 position 不為 static 的外層元素，如果沒有這樣的元素，則相對於視窗。
如果 position: fixed，「父元素」指視口。
margin如果沒有加字尾是相對於寬，但是加了字尾，比如margin-left，則是相對於高；
2.設定em時的計算
元素自身沒有設定字型大小大小時，則預設使用父元素字型大小大小。元素自身要是設定了字型大小後，則字型計算公式為：
需要轉換的畫素值/父元素的font-size=em值
元素的width、height、line-height、margin、padding、border等值轉換總是以當前元素的字型大小大小計算：
需要轉換的畫素值/元素的font-size=em值
比如：
.outerdiv
當innterdiv設定font-size的大小時
即各個區塊的位置都是浮動的，不是固定不變的。當寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。
"自適應網頁設計"的核心，就是css3引入的media query模組。設定斷點時，最好以內容為基礎設定，而不是以各種螢幕尺寸來設定。
@media screen and (max-width: 1200px)
@media screen and (max-width: 780px)
使的寬度為100%,但是不超過最大寬度400px;
img
使用calc實現字型的自適應。比如要讓螢幕寬度在 1553px-1032px 的範圍內變化時，font-size大小是在12px-16px之間對應變化，則
font-size: calc(0.75em + 4*(100vw - 1032px) / 521);
vw 相對於視窗的寬度：視窗寬度是100vw。視窗寬度指瀏覽器內部的可視區域大小，即window.innerwidth/window.innerheight大小，不包含工作列標題欄以及底部工具欄的瀏覽器區域大小。
0.75em可以換成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);
也可換成px單位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是safari瀏覽器不支援該寫法。
參考自：
自適應網頁設計（responsive web design）
基於vw等viewport視區相對單位的響應式排版和布局
自適應網頁設計 自適應網頁設計技巧
隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達...
自適應網頁設計
隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達...
自適應網頁設計
自適應網頁設計 允許網頁寬度自動調整 允許網頁寬度自動調整 自適應網頁設計 首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 ...