移動端webapp自適應布局

請看這篇：hcysunyang的blog：一篇真正教會你開發移動端頁面的文章(二)

width=device-width 這段**是讓布局視口的尺寸等於理想視口。

裝置畫素比（dpr） = 裝置畫素個數 / 理想視口畫素個數（device-width）

!(function
(doc, win) ;
win.addeventlistener(evt, fn, false);
doc.addeventlistener("domcontentloaded", fn, false);
}(document, window));

使用css3 media query 實現；

另可以使用sass的calc（）。

@media screen and (min-width: 320px) 
}@media screen and (min-width: 360px) 
}@media screen and (min-width: 400px) 
}@media screen and (min-width: 440px) 
}@media screen and (min-width: 480px) 
}@media screen and (min-width: 640px) 
}

使用單位 vw 實現動態計算。

html

首先，支援 css3 calc方法和 rem、vw單位的瀏覽器下，只需要html 這樣一句就好，另外加個**查詢限制下。

不過考慮到國內相容性的問題，還是結合**查詢來使用比較好。（**查詢的斷點暫時是借用上面的例子）

1、拿到設計圖，計算出頁面的總寬，為了好計算，取100px的font-size，如果設計圖是iphone6的那麼計算出的就是7.5rem，如果頁面是iphone5的那麼計算出的結果就是6.4rem。

2、動態設定html標籤的font-size值：

document.documentelement.style.fontsize = document.documentelement.clientwidth / 以rem為單位的頁面總寬 + 'px';

如iphone6的設計圖就是：

document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 'px';

iphone5的設計圖就是：

document.documentelement.style.fontsize = document.documentelement.clientwidth / 6.4 + 'px';

3、做頁面是測量設計圖的px尺寸除以100得到rem尺寸。

4、和**的做法一樣，文字字型大小不要使用rem換算，而是使用**查詢（？？？）

可為什麼不用rem呢？後來去查了一番資料，發現有一種叫做點陣字型的存在（什麼是點陣字型），也叫作位圖字型，位圖我們都知道，跟向量圖是有區別的，就是放大會模糊，所以點陣字型也是放大會模糊的，如果根據rem設定字型大小，字型會自由縮放，可能就會導致點陣字型模糊，所以需要設定使用幾種固定大小的字型。不過，在正常情況下，系統自帶的字型都是向量字型，所以使用rem為單位是沒有問題的，除非你的網頁需要用到特殊的點陣字型。


title>
charset="utf-8" />
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
head>
document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 'px';
script>
body>
html>

手淘開源庫

寬度用百分比，高度用rem，字型大小用rem或**查詢，或者直接用手淘開源庫。

!需注意chrome的font-size不能小於12px

移動端webapp自適應布局

移動端web app自適應布局探索與總結

移動端web app自適應布局探索與總結

移動端自適應布局

移動端webapp自適應布局

移動端web app自適應布局探索與總結

移動端web app自適應布局探索與總結

移動端自適應布局

相關推薦