?? ?前提：頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置堰燎。
給html根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)font-size值厚脉，然后頁面的所有元素布局均相對(duì)于該font-size值采用rem單位設(shè)定。那么基礎(chǔ)的font-size值該如何取呢接谨？
?? ?假如通過媒體查詢?cè)O(shè)置font-size饱岸，只能解決一部分的情況倒堕，而且并不能完成適配滨攻，因?yàn)槭謾C(jī)屏幕寬度類型實(shí)在太多了糯俗，所以font-size的取值要通過js計(jì)算，取當(dāng)前viewport的deviceWidth與設(shè)計(jì)稿的寬的比例值谅河，例如：我們的設(shè)計(jì)稿尺寸都是720px的咱旱，iphone6的deviceWidth是375px，那么計(jì)算出來的font-size值就是 375 / 720 = 0.520833绷耍，因?yàn)榈贸龅膄ont-size太小，不方便計(jì)算鲜侥，且有的瀏覽器可能不兼容太小字號(hào)褂始，所以將font-size放大100倍，所以最終計(jì)算出來的font-size為 375 / 720 * 100 = 52.0833(px); 當(dāng)然描函，這個(gè)值是根據(jù)設(shè)計(jì)稿來計(jì)算的崎苗，所以根據(jù)計(jì)算規(guī)則，下面列出幾種常見設(shè)計(jì)稿相應(yīng)的font-size值：
// deviceWidth = 320舀寓，font-size = 320 / 7.2 = 44.4433px
// deviceWidth = 375胆数，font-size = 375 / 7.2 = 52.0833px
// deviceWidth = 414，font-size = 414 / 7.2 = 57.5px
// deviceWidth = 500互墓，font-size = 500 / 7.2 = 69.4444px
// 可在script標(biāo)簽加上如下代碼：
????(function() {
????????document.addEventListener('DOMContentLoaded', function() {
????????????setRem(720,100)
????????}, false);
????})();
????window.onresize = function() {
????????setRem(720,100)
????};
????function setRem(pwidth,pre){
????????console.log('setRem')
????????var html = document.documentElement;
????????var windowWidth = html.clientWidth;
????????html.style.fontSize = windowWidth /pwidth*pre + 'px';
????};
----------------------------------------------------------------------------------------------
window.onload=function(){
getRem(720,100)
};
window.onresize=function(){
getRem(720,100)
};
functiongetRem(pwidth,prem){
varhtml=document.getElementsByTagName("html")[0];
varoWidth=document.body.clientWidth||document.documentElement.clientWidth;
html.style.fontSize=oWidth/pwidth*prem +"px";
}
?? ?onresize 當(dāng)屏幕大小發(fā)生變化的時(shí)候執(zhí)行的函數(shù)必尼，當(dāng)頁面刷新的時(shí)候不執(zhí)行，所以要添加onload事件，當(dāng)首次加載或者刷新的時(shí)候設(shè)置fontSize的大小
// deviceWidth = 320判莉，font-size = 320 / 7.2 = 44.4433px
// deviceWidth = 375豆挽，font-size = 375 / 7.2 = 52.0833px
// deviceWidth = 414，font-size = 414 / 7.2 = 57.5px
// deviceWidth = 500券盅，font-size = 500 / 7.2 = 69.4444px
// 這個(gè)7.2就是根據(jù)設(shè)計(jì)稿的橫向?qū)挾葋泶_定的帮哈，設(shè)計(jì)稿是720
// 至此，font-size的基礎(chǔ)值就確定好了锰镀，而且知道該font-size值是手機(jī)deviceWidth跟設(shè)計(jì)稿的比例值 的 100倍（重要）
?720是一個(gè)參數(shù)娘侍，是設(shè)計(jì)稿的大小，100是縮放比例泳炉，設(shè)置100方便換算
? ? 以此基準(zhǔn)比例憾筏，無論多屏幕的手機(jī)型號(hào)，可是寬度deviceWidth都是7.2rem
// 2）那么頁面元素該如何設(shè)置寬高胡桃、邊距…
// 例如：一個(gè)設(shè)計(jì)稿寬高為140px的圖標(biāo)踩叭，左邊距為50px，那么它的css應(yīng)該這樣寫：
// .icon{
// width: 1.4rem; /* 像素?fù)Q算rem：140px / 100 = 1.4rem */
// height: 1.4rem;
// margin: 000.5rem;
// }
// 因?yàn)閔tml的font-size是放大了100倍翠胰，所以計(jì)算rem時(shí)容贝，要用設(shè)計(jì)稿的實(shí)際像素除以100，140px / 100 = 1.4rem; 最后實(shí)際的像素大小就會(huì)由deviceWidth跟設(shè)計(jì)稿的橫向?qū)挼谋壤詣?dòng)計(jì)算出來之景。
