基本字型機關
常用的基本字型機關有：px, em，rem, vw，vh
px
絕對機關，頁面按精确像素展示
em
相對機關，基準點為父節點的字型大小。
*用例：文字的首行縮進2個字元*
<p sytle="text-index:2em"> 注意：
如果自身定義了font-size按照自身來計算
浏覽器預設字型大小是16px
rem
相對機關，相對根節點html的字型大小來計算，css3新加屬性。
- 方案1：簡單常用版本
以頁面基準1080px為例;html font-size值的計算：
(function (doc, win) {
var htmlFont = function () {
var docEl = doc.documentElement,
view = docEl.clientWidth,
height = docEl.clientHeight,
font;
docEl.style.minHeight = height + "px";
font = view / 10.8;
view > 1080 ? docEl.style.fontSize = 100 + "px" : docEl.style.fontSize = font + "px";
};
htmlFont();
win.addEventListener("resize", htmlFont, false)
})(document, window); - 方案2：高清方案
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1); 優點：
根據裝置螢幕的DPR,自動設定最合适的高清縮放。
保證了不同裝置下視覺體驗的一緻性。（上個方案是，螢幕越大元素越大；此方案是，螢幕越大，看的越多）
缺點：
因為螢幕越大，看的越多，是以在示例網站上，不能做到在所有的分辨率上都保持一緻的樣式
上述方案的樣式根據設計稿測量的資料，除以100，加上rem，即1rem=100px
vw，vh
vw：視窗寬度，1vw等于視窗寬度的1%。
*常用于wap端适配螢幕寬度*
vh：視窗高度，1vh等于視窗高度的1%。
*常用于pc端的全屏展示*
微信調整字型
- 原理
手機在系統設定和微信設定的通用設定中都提供放大字型功能，這兩種設定都可以系統中字型和應用中字型的大小。
改變font-size，不僅僅是根元素的font-size，所有font-size都會受到影響
- 解決方案
- 禁止調整浏覽器字型大小行為
- iOS系統
body設定-webkit-text-size-adjust屬性禁止調整字型大小
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
- Android系統
調整浏覽器字型是通過改變字型大小,是以可以考慮将字型大小在設定的時候進行等比例縮小。
例如，一個文字希望以10px來進行渲染，當浏覽器字型被放大兩倍時，此時font-size會變為20px。
是以我們可以在取到這個放大比例之後，對原樣式進行等比縮小，比如将原文字大小設定為5px，渲染的時候就變成了10px。
做這種處理時注意頁面中使用rem為機關。
<script>
(function(){
var $dom = document.createElement('div');
$dom.style = 'font-size:10px;';
document.body.appendChild($dom);
// 計算出放大後的字型
var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
document.body.removeChild($dom);
// 計算原字型和放大後字型的比例
var scaleFactor = 10 / scaledFontSize;
var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
})();
</script>
注意：如果頁面中使用了rem為機關，改變根元素的font-size
優點:
(1)這種方式可以完全還原頁面原本的布局樣式。
(2)實作簡單，隻需在頁面上加一段css,一段JavaScript。
缺點：
(1)因為通過代碼執行完成可能造成頁面閃爍，這個問題可以通過提前執行這段代碼或者做加載完成前頁面暫時不展示解決。
(2)這種方式對那些真正需要放大浏覽器字型的使用者并不友好。
- 改變布局适應适應這種調整浏覽器字型大小行為
優點：
(1) 不許額外執行JavaScript代碼。
(2)使用者可以選擇調整浏覽器字型,對于有這種需求的使用者友好，目前像京東淘寶的移動web端都是使用這種方式。
缺點：
(1) 即使通過改變布局該應對變化，但是還是會出現布局錯位的情況。
(2) 實作起來較為複雜，需要在開發時一直考慮這個問題。
注意：如果樣式都用的rem計算，那麼，每次重置時用js使得根元素的字型大小不變。
- px是否受到影響
對于元素寬高來說，因為rem是根據根元素的font-size來計算的，如果不使用rem計算寬高，那麼隻要不使用rem，圖檔的寬高将不受影響。
對于字型來說，隻要設定了font-size，使用px一樣會影響到字型大小。
- 實際中的解決辦法
示例：在手機端調整字型之後，頭部的圖檔會擠占位置，造成樣式錯亂，熱區也會定位不準
- 浏覽器和微信的緩存無法清除，導緻樣式修改之後沒有效果
- 元素寬高、熱區是根據rem計算，如果調整字型大小，那麼這些樣式和位置都要改變