前面有分享了4種適配方案，但始終是通過手動縮放或者視口縮放來實現，用來做一些專題頁，或者功能相對簡單的項目來說也是完全能應付的，但整體來說感覺還是一種縮放，說不上是真正的適配，言外之意就是即將分享真正的適配嘍，呵呵，開個玩笑，其實適配方式千差萬種，怎么用全靠自己把握，遇到問題總有解決方法，兵來將擋水來土掩，實在解決不了的就想辦法繞過，哈哈。
前面說了那么多廢話，開始干正事，適配方案4主要是通過CSS3新增的一個長度單位REM來實現的，約定如下，頁面中的1rem就是當前html的字體大小，假如當HTML的字體大小設為100px,那些時頁面上的1rem=100PX，假設頁面上的640PX的元素用REM表示就是6.4rem.
適配代碼如下：
<!DOCTYPE html> <html> <head> <title>主結構&適配方案4</title> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <!--適配主邏輯 S--> <script type="text/javascript"> //適配函數 function reset(){ var htmlo=document.getElementsByTagName('html')[0], clientW=document.documentElement.clientWidth || document.body.clientWidth, fontSz=clientW/16+'px'; htmlo.style.fontSize=fontSz; } //初始進來執行一次適配 reset(); //當屏幕旋轉的時候，再次執行一次適配,這里延時100ms是為了解決當用戶快速轉換屏幕的時候，適配失敗的問題 window.addEventListener('resize',function(){ setTimeout(function(){reset();},100); },false) </script> <!--適配主邏輯 E--> <style> body{ margin:0; background:#000; } h3,p,ul{ margin:0; padding:0; } .wrap{ width:100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0 0.5rem; background:#ccc; overflow:hidden; line-height:0.9rem; font-size:0.55rem; } .aside_left,.aside_right{ width:7.5rem; height:4rem; float:left; color:white; line-height:4rem; font-size:0.65rem; text-align:center; } .aside_con{ width:15rem; height:4rem; overflow:hidden; background:blue; color:white; line-height:2rem; font-size:0.75rem; text-align:center; } .aside_left{ background:red; } .aside_right{ background:green; } h3{ font-size:0.7rem; line-height:1rem; } ul{ overflow:hidden; padding-left:1rem; border:1px solid #000; } </style> </head> <body> <div id="wrap" class="wrap"> <!--示范結構 S--> <div class="aside_con"> <div class="aside_left">示范塊內容0</div> <div class="aside_right">示范塊內容1</div> </div> <div class="aside_con">整條示范內容2</div> <!--示范結構 E--> </div> </body> </html>
適配說明：
1：前面有提到1rem等於HTML的字體大小，那現在最關鍵的就是怎么根據不同屏幕尺寸修改HTML的字體大小，主要是通過根據屏幕的可視區寬度設置html節點的字體大小。例如你的設計稿是640px，我們就想像在可視區是640PX的時候，那除以16則HTML節點的字號就是40px,那要表現設計上的尺寸是320PX的元素，在寫樣式的時候就寫320/40即8rem即可。
可能會問為什么這里要除以16，是因為為了計算出一個合適的HTML字體大小，你完全可以除以其它值，或者直接不除，直接拿可視區寬度作為上HTML字體大小也是可以的，但是在布局計算元素尺寸的時候又是另一場惡夢。
2：此種方案是開發HTML5項目很理想的適配方案，特別是公司的wap端項目或者wepAPP,此種適配有一個問題就是很難實現1px的東東，如果手機的像素比是2，那1px的邊框會顯示成2像素，只會影響這些小細節，不會影響功能使用，要想做出近1PX的東東，可以通過偽類:after :before來插入元素再縮小1部就可以模擬出近似1px的東東，如果想完美實現1px，適配方案5會是你需要的。
以上代碼歸屬於我的github常用H5代碼整理項目（詳見其中adaptationMode/mode4/index.html）：https://github.com/xw5/mobile-code/
歡迎clone,歡迎star,一起學習，一起進步