### 2、移動端html5手機網站字體單位font-size選擇px還是rem 分為兩種情況： ①對于只需要適配手機設備，使用px就可以了 ②對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。 rem參考代碼： ~~~ html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } } ~~~ ### 通過一段js根據瀏覽器當前的分辨率改變font-size的值。 頁面的所有元素都不需要進行任何改變。 ~~~ <script> (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //微信打開檢測 function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } window.onload = function() { if (isWeiXin()) { $(".header-more").hide(); } } </script> ~~~ ### 1、不同設備尺寸下的字體的調整：[web app變革之rem](http://isux.tencent.com/web-app-rem.html) ### 4、在使用“em”作單位時 一定需要知道其父元素的設置，因為“em”就是一個相對值，而且是一個相對于父元素的值，其真正的計算公式是：