移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。
大寬度用%，高度和小寬度全部使用rem，簡單粗暴。
之前閱讀過大漠老師的使用Flexible實現手淘H5頁面的終端適配,介紹了手淘項目的H5制作規范。
在手淘的設計師和前端開發協作過程中：手淘設計師常選擇iPhone6作為基准設計尺寸，交付給前端的設計尺寸是按750px * 1334px為准(高度會隨着內容多少而改變)。前端開發人員通過一套適配規則自動適配到其他的尺寸。
而我這次負責的項目為公司剛上線的手游內置網頁，展示游戲公告和游戲角色信息。
因為手游是橫屏的，所以設計稿也有了些改變。內容盡可能集中在橫向，減少用戶上下滑動的次數。所以設計師按照960px出的稿。
前端步驟
- 設置根字體大小
html{font-size:100px;}
- js調節 1rem 對應的px大小
$(document).ready(function() {
// put all your jQuery goodness in here.
function adjust(){
// 設計稿寬度是960px
var scale = $('body').width() / 960;
$('html').css('font-size', 100 * scale + 'px');
}
// 進入、刷新頁面時執行函數，調整根字體
adjust();
//視口大小調整時執行函數，調整根字體
// 目測游戲內置頁面用不到，用戶不會產生resize事件
$(window).resize(function(){
adjust();
});
});
- 樣式
量取尺寸大小，換成對應的rem。比如：100px = 1rem;
因為javascript代碼是最后加載的，所以打開頁面后會有短暫布局混亂現象，之后js代碼才生效。
為了解決這個問題，需要在頁面加載完成之前就運行這段js代碼。所以需要把這段代碼放到<head></head>里。要注意的是這時jq插件還沒加載，所以要用原生的寫法。
<script>
function adjust(){
// 設計稿寬度是960px
var $html = document.getElementsByTagName('html')[0];
var viewh = document.documentElement.clientWidth;
var scale = viewh / 960;
$html.style.fontSize = 100 * scale + 'px';
alert("test");
}
// 進入、刷新頁面時執行函數，調整根字體
window.onload=adjust();
</script>
可以測試一下，當頁面沒有任何內容的時候就會彈出“test”。
OVER!