一. 允許網頁寬度自動調整： "自适應網頁設計"到底是怎麼做到的？
其實并不難。 首先，在網頁代碼的頭部，加入一行viewport元标簽。
viewport是網頁預設的寬度和高度，上面這行代碼的意思是，網頁寬度預設等于螢幕寬度(width=device-width)，原始縮放比
例(initial-scale=1)為1.0，即網頁初始大小占螢幕面積的100%。
對于viewport屬性，我是真正在接觸移動web開發是才遇到的，一把的ps布局都是固定的960px，1000px這種。
下面三篇文章是對viewport屬性詳細的解釋： Viewport(視區概念)——pc端的了解
Viewport(視區概念)——移動端的應用 viewport ——視區概念(轉)
對于老式IE6，7，8浏覽器需要js處理，由于主要平台是ios和安卓，所有可以暫時不考慮
二.不使用絕對寬度 由于網頁會根據螢幕寬度調整布局，是以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。
這一條非常重要。 具體說，CSS代碼不能指定像素寬度： width:xxx px; 隻能指定百分比寬度： width: xx%;
或者：width:auto;
這裡開發是指一個網頁不僅能用在ps上，也能同時用于移動端，但是對于webapp這種還是需要單獨做一個webapp使用的頁面。
對于這個知識點，對于我目前做的項目有用處，主要用于控制限定資料庫裡讀出來的圖檔寬度。 詳見：手機webapp的jquery mobile初次使用心得和解決圖檔自适應大小問題
三. 相對大小的字型 字型也不能使用絕對大小(px)，而隻能使用相對大小(em)。body { font: normal 100% Helvetica, Arial, sans-serif; }
上面的代碼指定，字型大小是頁面預設大小的100%，即16像素。h1 { font-size: 1.5em; }
然後，h1的大小是預設大小的1.5倍，即24像素(24/16=1.5)。small { font-size: 0.875em; }
small元素的大小是預設大小的0.875倍，即14像素(14/16=0.875)。四.流動布局(fluid grid) "流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水準方向overflow(溢出)，避免了水準滾動條的出現。 另外，絕對定位(position: absolute)的使用，也要非常小心。五. "自适應網頁設計"的核心，就是CSS3引入的Media Query子產品。 它的意思就是，自動探測螢幕寬度，然後加載相應的CSS檔案。
上面的代碼意思是，如果螢幕寬度小于400像素(max-device-width: 400px)，就加載tinyScreen.css檔案。
如果螢幕寬度在400像素到600像素之間，則加載smallScreen.css檔案。 除了用html标簽加載CSS檔案，還可以在現有CSS檔案中加載。@import url("tinyScreen.css") screen and (max-device-width: 400px);
六. CSS的@media規則 同一個CSS檔案中，也可以根據不同的螢幕分辨率，選擇應用不同的CSS規則。@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
上面的代碼意思是，如果螢幕寬度小于400像素，則column塊取消浮動(float:none)、寬度自動調節(width:auto)，sidebar塊不顯示(display:none)。
七. 圖檔的自适應(fluid image) 除了布局和文本，"自适應網頁設計"還必須實作圖檔的自動縮放。
這隻要一行CSS代碼：
img { max-width: 100%;} 這行代碼對于大多數嵌入網頁的視訊也有效，是以可以寫成：
img, object { max-width: 100%;}
老版本的IE不支援max-width，
是以隻好寫成： img { width: 100%; }
此外，windows平台縮放圖檔時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有指令：img { -ms-interpolation-mode: bicubic; } 或者，Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { varimgs=document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
不過，有條件的話，最好還是根據不同大小的螢幕，加載不同分辨率的圖檔。有很多方法可以做到這一條，伺服器端和用戶端都可以實作。
8.字型rem自适應大小
先來個css版的。
@media screen and (max-width:359px) and (min-width:320px){
html,body{
font-size: 50px !important;
}
}
@media screen and (max-width:374px) and (min-width:360px){
html,body{
font-size: 56.25px !important;
}
}
@media screen and (max-width:413px) and (min-width:375px){
html,body{
font-size: 58.5px !important;
}
}
@media screen and (max-width:639px) and (min-width:414px){
html,body{
font-size: 64.6px !important;
}
}@media screen and (min-width:640px){
html,body{
font-size: 100px !important;
}
}
rem顧名思義就是root element，這個是一個相對的機關，與em的差别在于rem相對的是根節點html的font-size,em相對的是父元素font-size。使用rem其實是用媒體查詢修來改html的font-size，那麼使用rem的元素的大小也會相應的改變，是以我們隻要寫一份css就可以适配所有手機的螢幕了。雖然rem在某些浏覽器下面不夠精準，但那也隻是極少數，如果需要非常精準的适配，那麼可以使用js來計算html的font-size。
很多開發者聽到适配的第一反應就是手機的螢幕寬度多少多少，實體像素多少多少，然後考慮适配。這是從設配的角度入手，拿視覺稿去适配手機。難道我們就不能抛開裝置從視覺稿入手嗎？那麼就來看看。
設計師給的視覺稿，一般都是按照640px來設計的。當我們拿到視覺稿時，首先把視覺稿的寬度轉換為rem，我們并不需要考慮裝置的分辨率，隻需要按照 視覺稿寬度 = font-size x rem 這個公式來計算就好了。視覺稿的寬度是給定的，我們以640px為例，font-size 與rem是兩個變量，我們隻需要它們的乘積等于640即可。我們采用定一變一的方式，假定rem=6.4，那麼初始值font-size就必須等于 100px，我們就可以根據需要适配的螢幕寬度來等比例調整font-size。那麼如果我們640px的視覺稿需要顯示成320px呢，我們隻需要把font-size對應的縮小一半就可以了。其他的什麼375px、414px、各種的螢幕，隻需要等比例縮放就好了。比如：
320px： font-size = 320 / 640 * 100 = 50px;
360px：font-size = 360 / 640 * 100 = 56.25px;
.........
800px：font-size = 800 / 640 * 100 = 125px;
其實按照比例算出來的font-size，我都是向下取小數點，這樣可以保證元素的寬度不會超過總寬度。隻是如果我們的視覺稿寬度給的是640px，但是需要在大于640的裝置下顯示的話，那麼就會出現圖檔模糊等現象了，是以我們一般都使用大的視覺稿來适配小的螢幕。比如需要适配比640px大的螢幕，你可以讓設計師根據寬度為960px來設計，然後轉換為9.6rem，初始值font-size=100px;再根據需要适配的螢幕寬度來等比例調整font-size的大小就好了。
如果想需要更準确的适配，可以使用js動态計算視窗的寬度來改變font-size的大小，阿裡手淘使用的flexible也是這樣的方式，以下是趴下來的一份flexible的簡化版(function(win) {
var remCalc = {};
var docEl = win.document.documentElement,
tid;
function refreshRem() {
// 擷取目前視窗的寬度
var width = docEl.getBoundingClientRect().width;
// 大于640px 按640算
if (width > 640) { width = 640 }
// 把視窗的寬度固定分為10份 也就是10rem
// 按視覺稿640算 640/10=64px 那麼1rem = 64px
// 640視覺中 80px*80px的按鈕 轉換為rem 80/64 = 1.25rem
// 按鈕的寬高固定為 1.25rem * 1.25rem
// 當視窗寬度縮放為 320px的時候
// 那麼 1rem = 32px
// 原來 80px*80px的按鈕現在變為 1.25rem * 32px = 40px
// 按鈕變為 40px * 40px
// 其他寬度也類似
//
// cms做法也類似
// 隻是我們把視窗寬度固定分為 6.4份，即6.4rem
// 是以 1rem = 100px
// 640視覺中 80px*80px的按鈕 轉換為rem 80/100 = 0.8rem
// ....其他也差不多
//
//
// 對比
// 其實也就是計算rem的問題 視覺稿量出來的值 除64 或 100的問題
// 除100 總比 除64 好口算
// 就算用sass寫個 @function px2rem代替口算
// .8rem 總比輸入 px2rem(80)少幾個字元
//
//
var rem = width / 10; // cms 隻要把這行改成 var rem = width /640 * 100
docEl.style.fontSize = rem + "px";
remCalc.rem = rem;
//誤差、相容性處理
var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + "px"
}
}
//函數節流，避免頻繁更新
function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
}
//視窗更新動态改變font-size
win.addEventListener("resize", function() { dbcRefresh() }, false);
//頁面顯示的時候再計算一次 難道切換視窗之後再切換來視窗大小會變?....
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
remCalc.refreshRem = refreshRem;
remCalc.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) { val += "px" }
return val
};
remCalc.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) { val += "rem" }
return val
};
win.remCalc = remCalc
})(window);
// 考拉移動端全站使用rem的不是很多
// 主要用100%布局 比如width、height、padding
// 也有直接用px 字型大小使用px固定不變
// 還有使用em的 基于font-size 定line-height
// 全站元素使用 box-sizing: border-box
// 多行省略号 text-overflow: ellipsis; -webkit-line-clamp: 2;
// 非主要頁面很多都是圖檔 影響seo 看得出很缺前端
// 使用rem 最好文字都指定字型大小 不然會繼承html的font-size
【編輯推薦】