国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > rem原理:如何做一個(gè)能自動(dòng)根據(jù)手機(jī)大小不同,自動(dòng)配置rem的功能

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

來(lái)源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-09-06 14:30:09 1662445809

  - 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的功能

web前端面試題

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

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
軟件開(kāi)發(fā)管理流程中會(huì)出現(xiàn)哪些問(wèn)題?

一、需求不清需求不明確是導(dǎo)致項(xiàng)目失敗的主要原因之一。如果需求沒(méi)有清晰定義,開(kāi)發(fā)人員可能會(huì)開(kāi)發(fā)出不符合用戶期望的產(chǎn)品。二、通信不足溝通問(wèn)...詳情>>

2023-10-14 13:43:21
軟件定制開(kāi)發(fā)中的敏捷開(kāi)發(fā)是什么?

軟件定制開(kāi)發(fā)中的敏捷開(kāi)發(fā)是什么軟件定制開(kāi)發(fā)中的敏捷開(kāi)發(fā),從宏觀上看,是一個(gè)高度關(guān)注人員交互,持續(xù)開(kāi)發(fā)與交付,接受需求變更并適應(yīng)環(huán)境變化...詳情>>

2023-10-14 13:24:57
什么是PlatformIo?

PlatformIO是什么PlatformIO是一個(gè)全面的物聯(lián)網(wǎng)開(kāi)發(fā)平臺(tái),它為眾多硬件平臺(tái)和開(kāi)發(fā)環(huán)境提供了統(tǒng)一的工作流程,有效簡(jiǎn)化了開(kāi)發(fā)過(guò)程,并能兼容各種...詳情>>

2023-10-14 12:55:06
云快照與自動(dòng)備份有什么區(qū)別?

1、定義和目標(biāo)不同云快照的主要目標(biāo)是提供一種快速恢復(fù)數(shù)據(jù)的方法,它只記錄在快照時(shí)間點(diǎn)后的數(shù)據(jù)變化,而不是所有的數(shù)據(jù)。自動(dòng)備份的主要目標(biāo)...詳情>>

2023-10-14 12:48:59
服務(wù)器為什么要用Linux?

服務(wù)器為什么要用Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,有其獨(dú)特的優(yōu)勢(shì)和特點(diǎn)。包括其...詳情>>

2023-10-14 12:34:11
快速通道