https://www.cnblogs.com/annie211/p/8118857.html
這是原文。感謝大佬的分享指導(dǎo)已卸。
同程APP的做法：
同程APP 會(huì)根據(jù)你的屏幕大小的變化州邢，根元素（html）的字體大小也會(huì)變化。
首先設(shè)置頁(yè)面 meta?
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
一張 750px的設(shè)計(jì)稿。采用 1rem = 100px 便于換算。 這樣在html設(shè)置根元素的字體大小就是 ： font-size：100px
750 / 100 = 7.5rem 。這是一個(gè)比值
俗氣點(diǎn)就是 750個(gè)蘋(píng)果者冤，采用 1斤等于100個(gè)蘋(píng)果，得到7.5斤档痪。
rem單位是： 基于根元素的字體大小而設(shè)置元素的具體數(shù)值涉枫，如下紅圈所示。
假設(shè)我們?cè)趇phone6打開(kāi)腐螟，得到的屏幕寬是 375px 愿汰。
375 / 7.5 = 50px??這樣在html設(shè)置根元素的字體大小就是 ： font-size：50px。 上圖只是演示乐纸，不同的比值font-size大小不同尼桶。
俗氣點(diǎn)就是 750個(gè)蘋(píng)果，采用 1斤等于100個(gè)蘋(píng)果锯仪，得到7.5斤泵督。 根據(jù)這個(gè)標(biāo)準(zhǔn)！你有375個(gè)蘋(píng)果庶喜，你想得到7.5斤小腊，就必須知道一斤有幾個(gè)蘋(píng)果。 所以算出來(lái)是 50個(gè)久窟！ 在你設(shè)置大小時(shí)秩冈，比如 width:0.5rem 就等于 0.5 * 50 = 25px。
有人覺(jué)得亂
總結(jié)一下： 用化學(xué)的例子吧斥扛。? 兩個(gè)東西進(jìn)行化學(xué)反應(yīng)入问，需 達(dá)到 1：7.5的比例。
750px ：稀颁？? = 1：7.5? =》? 芬失？ = 100? ? ? 那么你原來(lái)的是750px設(shè)計(jì)稿。在375px上實(shí)現(xiàn)匾灶，
375px :? ?? ? = 1：7.5? =》? 棱烂？ = 50? ?就是 50px? font-size = 50px
另一個(gè)總結(jié)： 750px的屏幕， 按1rem=100px 阶女，便于換算颊糜。得到 屏幕大小 7.5rem，也是比值等于 7.5秃踩。
?動(dòng)態(tài)設(shè)置html的font-size：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
document.documentElement.style.fontSize? = 750 / 7.5 = 100px衬鱼。 此時(shí) 1rem = 100px
當(dāng)750px的被顯示在 寬375px的設(shè)備上時(shí)，?document.documentElement.clientWidth? 等于 375px憔杨。
document.documentElement.style.fontSize? =?375 / 7.5 = 50px鸟赫。 此時(shí) 1rem = 50px
對(duì)應(yīng)比： 750 ：100px = 375 ： 50px? 這兩個(gè)相等，在不同的 大小px屏幕上打開(kāi)，呈現(xiàn)的效果會(huì)是一樣的惯疙，達(dá)到解決rem適配問(wèn)題翠勉。
$\color{#228B22}{前端學(xué)習(xí)小總結(jié)，不對(duì)之處霉颠，歡迎大神們噴我对碌。可以的話(huà)順手點(diǎn)個(gè)贊吧~~蒿偎！}$
$\color{red}{警: 禁止抄襲朽们，轉(zhuǎn)載說(shuō)明出處 ??}$
