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

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

　　因?yàn)椴煌謾C(jī)型號(hào)的屏幕大小都不同，所以這時(shí)候我們就不能用px來(lái)做單位，rem是適配不同手機(jī)屏幕的一種方案,設(shè)置根元素的font-size來(lái)改變r(jià)em尺寸

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

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

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

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

　　//獲取html元素

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

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

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

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

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

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

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