設(shè)計稿750用rem怎么算 1rem等于多少像素?
1rem等于多少像素?1rem=20px,為什么很多web項目還是使用px,而不是rem?在移動終端開始流行的初期,為了使移動終端網(wǎng)頁適應(yīng)不同大小的手機(jī)屏幕,淘寶網(wǎng)的一位前端老板寫了一個經(jīng)過改編的JS
1rem等于多少像素?
1rem=20px,
為什么很多web項目還是使用px,而不是rem?
在移動終端開始流行的初期,為了使移動終端網(wǎng)頁適應(yīng)不同大小的手機(jī)屏幕,淘寶網(wǎng)的一位前端老板寫了一個經(jīng)過改編的JS,叫做flexible,可以在GitHub找到。原理很簡單。似乎根據(jù)手機(jī)的分辨率和DPI(我不記得了),動態(tài)設(shè)置根元素HTML的fontsize,然后頁面元素的大小就是rem,因為1rem=fontsizeofhtml。
后來,出現(xiàn)了大眾和VH。漸漸地,許多項目使用大眾汽車進(jìn)行改編。100vw=100%寬度。因為兼容性不是很好,所以一直沒有上線。
nodejs出現(xiàn)后,前端工程開始了。有pxtorem和pxtoview port等插件。在開發(fā)過程中,我們可以根據(jù)UI標(biāo)記的PX case直接編寫它們。在打包時,插件將幫助我們將PX計算轉(zhuǎn)換為REM或VW。
我現(xiàn)在用大眾。不考慮兼容性。我甚至不看那些需要與ie兼容的公司。PX是一個固定的像素,不能適應(yīng)流的布局。通常,高度由Px設(shè)置,web應(yīng)用版本的寬度由rem.2設(shè)置。EM是相對于父元素的字體大小單位。因為它是相對于父元素的字體大小單位,所以如果要設(shè)置元素的寬度和高度,必須查看其父元素的大小。如果父對象也是EM單位,則必須轉(zhuǎn)到其父對象并逐層計算以獲得準(zhǔn)確的像素值。
3. REM的出現(xiàn)改變了許多移動終端的適應(yīng)性,因為REM指的是相對于根元素的字體大小單位。只要HTML根上的字體大小是根據(jù)屏幕大小設(shè)置的,rem中的元素大小就會相應(yīng)地改變。
前端開發(fā)中px,em,rem這些單位有哪些不同之處?
CSS3中添加了一個新的相對單位REM(根em,根em)。Rem相對于根節(jié)點(或HTML節(jié)點)。如果根節(jié)點設(shè)置了字體-尺寸:10px左右字體-尺寸:1.2毫米字體大小等于12px