移動(dòng)端rem布局原理 rem是什么單位?
rem是什么單位?Rem是一個(gè)相對(duì)單位,相對(duì)于根元素的字體大小。我們只需要指定根元素作為參考值。主要用于屏幕適配布局,移動(dòng)終端應(yīng)用廣泛。這樣,通過根據(jù)不同的屏幕設(shè)置不同的根元素,系統(tǒng)可以適應(yīng)不同的屏幕
rem是什么單位?
Rem是一個(gè)相對(duì)單位,相對(duì)于根元素的字體大小。我們只需要指定根元素作為參考值。主要用于屏幕適配布局,移動(dòng)終端應(yīng)用廣泛。這樣,通過根據(jù)不同的屏幕設(shè)置不同的根元素,系統(tǒng)可以適應(yīng)不同的屏幕。
為什么很多web項(xiàng)目還是使用px,而不是rem?
在移動(dòng)終端剛剛流行的早期,為了使手機(jī)頁面適應(yīng)不同大小的手機(jī)屏幕,淘寶網(wǎng)的一位前端老板寫了一個(gè)經(jīng)過改編的JS,叫做flexible,可以在GitHub找到。原理很簡(jiǎn)單。似乎根據(jù)手機(jī)的分辨率和DPI(我不記得了),動(dòng)態(tài)設(shè)置根元素HTML的fontsize,然后頁面元素的大小就是rem,因?yàn)?rem=fontsizeofhtml。
后來,出現(xiàn)了大眾和VH。漸漸地,許多項(xiàng)目使用大眾汽車進(jìn)行改編。100vw=100%寬度。因?yàn)榧嫒菪圆皇呛芎?,所以一直沒有上線。
nodejs出現(xiàn)后,前端工程開始了。有pxtorem和pxtoview port等插件。在開發(fā)過程中,我們可以根據(jù)UI標(biāo)記的PX case直接編寫它們。在打包時(shí),插件將幫助我們將PX計(jì)算轉(zhuǎn)換為REM或VW。
我現(xiàn)在用大眾。不考慮兼容性。我甚至不看那些需要與ie兼容的公司。PX是一個(gè)固定的像素,不能適應(yīng)流的布局。通常,高度由Px設(shè)置,web應(yīng)用版本的寬度由rem.2設(shè)置。EM是相對(duì)于父元素的字體大小單位。因?yàn)樗窍鄬?duì)于父元素的字體大小單位,所以如果要設(shè)置元素的寬度和高度,必須查看其父元素的大小。如果父對(duì)象也是EM單位,則必須轉(zhuǎn)到其父對(duì)象并逐層計(jì)算以獲得準(zhǔn)確的像素值。
3. REM的出現(xiàn)改變了許多移動(dòng)終端的適應(yīng)性,因?yàn)镽EM指的是相對(duì)于根元素的字體大小單位。只要HTML根上的字體大小是根據(jù)屏幕大小設(shè)置的,rem中的元素大小就會(huì)相應(yīng)地改變。
前端開發(fā)中px,em,rem這些單位有哪些不同之處?
早期的前端設(shè)計(jì)非常直觀,可以使用Adobe Dreamweaver、Photoshop、fireworks、Flash軟件制作漂亮的網(wǎng)頁。HTML也不需要太先進(jìn)的技術(shù),基本上可以使用表格。但隨著時(shí)間的推移,煙花爆竹和閃光已經(jīng)基本消除。相反,HTML5、CSS3、JavaScript、jQuery和Ajax是Web前端的核心技術(shù)。
現(xiàn)在學(xué)習(xí)HTML前端設(shè)計(jì),我們首先需要掌握的是div和CSS。我們不能再使用以前直觀的設(shè)計(jì)方法,而是使用div和CSS來控制網(wǎng)頁的布局。我們還需要了解bootstrap/angularjs的框架。除此之外,交互式網(wǎng)頁的設(shè)計(jì)還需要掌握ASP、PHP等開發(fā)語言的知識(shí)。一句話,前端開發(fā)聽起來很簡(jiǎn)單,但其實(shí)要學(xué)的東西太多了,太復(fù)雜了。
作為HTML前端的初學(xué)者,首先,我們應(yīng)該從最基本的開始。如果我們能通過div和CSS控制網(wǎng)頁中的每一個(gè)內(nèi)容,那將會(huì)非常有趣。