一、問題彙總
- 手機網頁怎麼製作？
- 怎麼讓網頁適應不同手機屏幕？
- H5網頁設計到底該設計多大尺寸？
- rem怎麼自適應佈局？
- H5一屛頁面如何自適應屏幕？
- viewport該怎麼寫？
- width=device-width如何自適應不同手機屏幕的？
- css3的rem單位怎麼使用？
- 如何通過media媒體查詢實現網頁自適應屏幕？
- 怎麼使用100%百分比做自適應佈局？
- 如何使用js改變zoom縮放網頁自適應手機屏幕？
- 如何使用js改變html的font-size進行網頁自適應？
- H5網頁字體大小設置多大比較合適？
- H5網頁字體大小設計規範是什麼？
- H5頁面字體大小如何自適應手機屏幕？
- 移動端H5網頁字體大小font-size該用px、em還是rem?
- 有沒有前端框架可以解決自適應佈局？
- bootstrap怎麼自適應佈局？
- 更多網頁自適應、字體大小等問題… …
總結：看來大家遇到的移動端H5網頁設計問題還真不少，恭喜你們終於找到最好的解決方案了，請仔細閱讀以下內容，一定有所收穫。
二、小白科普
2.1 手機尺寸、屏幕大小和分辨率之間的關係
我們經常會聽到的就是手機廣告上說到詞語，蘋果手機6，4.7寸、5.5寸，還有曾經的3.5寸，4.0寸，當然也還有現在比較流行的全面屏手機6.0寸，還有一些平板或pad尺寸比如7.9寸，9.7寸，12.9寸。說了這麼多尺寸，是不是大家有點暈了，下面說正題。
手機尺寸：指手機屏幕對角長度，以英寸的單位，1英寸=25.4MM。也可以用尺子量一下長度多少毫米，然後除以25.4就是手機的尺寸。
手機屏幕大小：這個需要跟大家舉個例子說明了，最簡單的比較就是蘋果4s與蘋果5s比，它們的手機屏幕寬度是一樣的，但是蘋果4s是3.5寸，蘋果5s是4.0寸，爲什麼屏幕寬度一樣尺寸缺不一樣大呢，這個就去看手機尺寸的定義，原來是手機屏幕變高了，所以對角線長度變長，所以手機尺寸變大了。
那麼手機屏幕寬度怎麼知道是多寬多高呢？
有人說了，我來拿尺子量一下。。。。
不錯，懂得動腦了
可惜不是你想的那樣，你拿尺子量得到的只是手機物理尺寸，畢竟你得到的單位是毫米，我們做網頁需要的是像素或者點。
下面教大家一個簡單的辦法來獲得手機屏幕的寬度：
我們可以寫一個網頁，網頁裏用腳本彈出當前手機屏幕的寬度。
<html>
<head>
<title>測試手機屏幕寬度</title>
<script>
function showWindowWidth(){
alert(window.innerHeight "，" +window.innerWidth);
}
</script>
</head>
<body onload="showWindowWidth();"></body>
</html>將頁面發佈一下，這樣用手機訪問就可以得到手機的屏幕寬度和高度了。
這時候又有人說了，那我豈不是要找很多的手機來測試？
好吧，對於你這樣的小白，我只好把我爲了測試買的蘋果4、蘋果5、蘋果6、蘋果7、蘋果8拿出來給你測試了（(^__^) 嘻嘻……，裝了個B，我可沒買那麼多手機，恩…我也就買了4啊5s啊7P啊，好了不吹了）
神器上場，谷歌瀏覽器。
額，當然不止谷歌瀏覽器了，現在大部分瀏覽器都支持開發者調試模式，按F12就可以打開，其中就有手機調試模式，裏面已經爲大家設定了大部分手機寬度和高度的型號手機，你只需要去選擇就可以知道各類手機的屏幕寬度和高度了。
好了上面說了一大堆，不知道你現在知道怎麼開發手機H5自適應網頁了嗎？
不知道，OK，那是因爲你還不知道手機屏幕分辨率是什麼，下面繼續。
手機屏幕分辨率：其實所有手機畫面都是由一個點一個點組成，這一個個小點我們稱之爲像素，像素的單位是px。分辨率分爲寬高，比如電腦的屏幕分辨率1024*768px，1366*768px。還有手機的常見分辨率960x640，1136*640px。
這個時候大家又要問了，我怎麼知道我的手機是多少分辨率的啊？
噗~~，先讓我吐口血~！
好了，下面正式回答一下這個問題：
想知道自己的手機，那就比較簡單，直接在屏幕主頁，進行屏幕截屏（如果連這個你也不會，那麼我也是沒轍了，你換我下面的方案吧），然後進入相冊，找到截屏的圖片，查看詳細，裏面會有尺寸，這個尺寸就是你的手機分辨率，比如我的是最新款的vivo x20全面屏手機，分辨率就是 1080*2160px（嘿嘿，不小心又裝了B，噴我的肯定是買蘋果X的）。
那我想找其他類型的手機是什麼分辨率咋辦呢？
額，那我也只能說，你去百度吧，想找那個找哪個。
關鍵詞：xx手機分辨率
算了，看在你們已經不厭其煩的讀到這裏，那麼我還是奉上我爲大家百度好的各類手機分辨率吧。
| 手機型號 | 手機尺寸 | 屏幕大小 | 屏幕分辨率 | 後攝像頭 |
|---|---|---|---|---|
| iPhone4 | 3.5英寸 | 320pt*480pt | 640px*960px | 500萬像素 |
| iPhone4s | 3.5英寸 | 320pt*480pt | 640px*960px | 700萬像素 |
| iPhone5 | 4.0英寸 | 320pt*568pt | 640px*1136px | 800萬像素 |
| iPhone5s | 4.0英寸 | 320pt*480pt | 640px*1136px | 800萬像素 |
| iphone6 | 4.7英寸 | 375pt*667pt | 750px*1334px | 800萬像素 |
| iphone6s | 4.7英寸 | 375pt*667pt | 750px*1334px | 1200萬像素 |
| iphone6 plus | 5.5英寸 | 417pt*736pt | 750px*1334px | 800萬像素 |
| iphone6s plus | 5.5英寸 | 417pt*736pt | 750px*1334px | 1200萬像素 |
| vivo x5 | 5.0英寸 | 360pt*640pt | 720px*1280px | 1300萬像素 |
| android | 320pt*420pt | 240px*320px | ||
| android | 320pt*480pt | 320px*480px | ||
| android | 360pt*500pt | 480px*800px | ||
| android | 320pt*480pt | 640px*960px | ||
| android | 360pt*640pt | 540px*960px | ||
| android | 360pt*640pt | 720px*1280px | ||
| android | 360pt*640pt | 1080px*1920px |
綜上可以看出來，目前主流的手機屏幕寬度已經在360pt以上了，最低的也是320pt的。
這個屏幕寬度也就是展示我們網頁時實際提供的像素點數。
也就是我們通常寫在meta標籤裏width=device-width這個device-width這個值。
好了，以上我們把基本的理論說了一下，下面我們給出實際項目中採用的自適應方法。
三、H5網頁自適應實戰
3.1 使用zoom進行網頁縮放
這個方法比較實用，對於剛入門寫移動端H5網頁的人來說是最容易的一種方式，因爲這種方式，你不需要考慮用戶的手機型號，手機的分辨率，手機的屏幕大小，你只需要按照UI設計的圖原封不動的用網頁寫一遍即可，下面解決些用法及原則。
3.1.1 UI設計方法
在進行UI設計的時候，我們採用一種固定的圖片寬度來設計，用主流中的一款手機做測試即可，通常我們採用這種方式設計UI時，我們的設計尺寸寬度定的是640px或者750px，偶爾也有720px的。
3.1.2 網頁開發原則
網頁開發的時候，請按照UI提供的圖片進行編寫，比如圖片是640px的，那麼網頁寫的時候你就當手機屏幕是640px的寫，寬度或者高度，圖片上設計的是多少，你就寫多少，文字大小是多少，你也寫多少，完全不用考慮其他問題，唯一要注意的就是你的整個網頁必須採用像素px作爲單位。比如文字大小font-size: 30px;
3.1.3 縮放方法
方法就是在你編寫的網頁上加載一段縮放腳本，腳本必須在頁面加載完成時執行，下面給出jquery版本的寫法。
$(window).bind('resize load', function() {
$("body").css("zoom", $(window).width() / 640);
$("body").css("display", "block");
$("body").css("zoom", $(window).width() / 640);
});注意:這裏面的數字640，就是你UI設計圖片的寬度或者說是你網頁的寬度。
當然光寫這一個腳本是不夠的
我們還需要改一下meta標籤中對viewport的定義：
<meta name="viewport" content="width=640, maximum-scale=1.0, user-scalable=no"/>好吧，細心的你可能也發現了，
我們隊width設置了固定值640，沒錯這個也是UI設計圖片的寬度。
到此，你已經學會了最簡單的一種網頁自適應了。
就是這麼簡單。
3.2 使用initial-scale定義初始化縮放值
這個方法和使用zoom縮放有着異曲同工之處，主要就是對頁面進行縮放，UI設計請直接參考3.1.1，開發請參考3.1.2。
3.2.1 縮放方法
有空再寫，今天寫了3個小時了，爲大家找資料還是很不容易的。。。