- rem的原理，如何做一個能自動根據(jù)手機大小不同，自動配置rem的功能

　　rem是root em 的簡寫 ,是根據(jù)根元素的字號大小進行的,它是CSS3中新增加的一個尺寸(度量)單位，根節(jié)點(html)的font-size決定了rem的尺寸，也就是說它是一個相對單位，相對于(html),瀏覽器的默認(rèn)的font-size是16px，1rem默認(rèn)就等于16px。

　　因為不同手機型號的屏幕大小都不同，所以這時候我們就不能用px來做單位，rem是適配不同手機屏幕的一種方案,設(shè)置根元素的font-size來改變rem尺寸

　　假如 html{font-size:20px;} .box{width:1rem;height:1rem;background:red;}將根元素html的font-size設(shè)置為20px，此時box的寬高都為20px，也就是1rem = 20px

　　如果用1rem=20px去寫頁面，那么即使所有的單位換成了rem，依舊還是最終相對于px，沒有意義,還是px,不會根據(jù)手機大小進行適配,想要做一個能自動根據(jù)手機大小不同，自動配置rem的功能

　　- 方法1:利用js動態(tài)獲取實現(xiàn)

　　首先用js根據(jù)不同的視窗寬度動態(tài)的改變根元素的font-size ``` //獲取視窗寬度(兼容性寫法) let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

　　//獲取html元素

　　let rootDom = document.querySelector('html');

　　//動態(tài)設(shè)置html的font-size(除以10是讓瀏覽器的font-size達到比較合適目的)

　　rootDom.style.fontSize = rootWidth / 10 + 'px';

　　- 方法2:根元素的font-size:某某vw;

　　前面說了如果用1rem=20px去寫頁面，那么即使所有的單位換成了rem，依舊還是最終相對于px，沒有意義,還是px,不會根據(jù)手機大小進行適配,想要做一個能自動根據(jù)手機大小不同，自動配置rem的功能，所以此時就需要把html{font-size：?px;}這里的單位px換成一個其他的相對單位，如果想要書寫QQ音樂或者網(wǎng)易新聞這樣的頁面，他們是會隨著窗口變化而變化的，所以需要換的這個單位得是一個相對于窗口變化的單位，此時就需要引入一個新單位vw v是viewport w是width vw就是一個相對于視口寬度的單位 滿屏的時候是100vW，固html設(shè)置font-size的時候，單位就可采用vw，但是現(xiàn)在就面臨一個問題 font-size：?vw;多少合適回到頁面書寫的時候，UI設(shè)計師給的數(shù)據(jù)單位是px，而我們頁面書寫想用rem，但是rem是相對于根元素html，html需要設(shè)置的font-size的單位是vw?此時就需要知道px rem vw這3個單位之間的換算px rem vw這3個單位之間的換算已知：1rem=16px 滿屏是100vw 假如當(dāng)前設(shè)備是iPhone6，那么此時100vw=375pxtodo 1rem=16px 100vw=375px ---》 1rem=16px 1vw=3.75px 1rem=16px=4.26667vw依次類推，可以假設(shè)1rem=100px 假設(shè)當(dāng)前設(shè)備是iPhone6，那么此時100vw=375pxtodo 1rem=100px 100vw=375px ---》 1rem=100px 1vw=3.75px 1rem=100px=26.6667vw依次類推，可以假設(shè)1rem=120px 假設(shè)當(dāng)前設(shè)備是iPhone6，那么此時100vw=375pxtodo 1rem=120px 100vw=375px ---》 1rem=120px 1vw=3.75px 1rem=120px=32vw依次類推，可以假設(shè)1rem=100px 假設(shè)當(dāng)前設(shè)備是iPhone6plus，那么此時100vw=414pxtodo 1rem=100px 100vw=414px ---》 1rem=100px 1vw=4.14px 1rem=100px=24.15vw 以上只要比例換算是相等的都可以，但是前面2個的換算都是除不盡四舍五入來的，想要保證數(shù)據(jù)的準(zhǔn)確度，建議采用1rem=120px=32vw這個比例假如現(xiàn)在在750的設(shè)計圖上，ps測量上的文字大小是90px，因為dpr是2，所以此時書寫px就是45px，把45px轉(zhuǎn)換成rem，根據(jù)1rem=120px這個比例，最終代碼書寫font-size:0.375rem(45px/120px); 其實就相對于是90/2/120 90/240 這樣口算很麻煩，可以在vscode上安裝插件 px to rem 插件 設(shè)置一下轉(zhuǎn)換比例即可 轉(zhuǎn)換的快捷鍵是 alt+Z ，設(shè)置轉(zhuǎn)換比例為240最終代碼書寫的時候，需要給html{font-size：32vw;} 假如測量文字大小是90px，代碼書寫font-size：90px按一下alt+Z，結(jié)果就是font-size: 0.38rem;假設(shè)現(xiàn)在的設(shè)計圖是750的，想要用1rem=100px=26.6667vw比例換算，假如ps測量的高度是100px，請問此時書寫height：?rem;

　　過程：因為設(shè)計圖是750的，所以此時dpr是2 如果寫px，那么100px此時寫成50px但是最終想要用rem寫 已知1rem=100px 所以 此時的50px 寫成rem就是 0.5rem 。假設(shè)現(xiàn)在的設(shè)計圖是1242的，想要用1rem=100px=24.15vw比例換算，假如ps測量的高度是90px，請問此時書寫height：?rem;，過程：因為設(shè)計圖是1242的，所以此時dpr是3 如果寫px，那么90px此時寫成30px，但是最終想要用rem寫 已知1rem=100px 所以 此時的30px 寫成rem就是 0.3rem

　　更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。