- 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)。