為什么很多web項(xiàng)目還是使用px，而不是rem？在移動(dòng)終端剛剛流行的初期，為了使手機(jī)頁面適應(yīng)不同大小的手機(jī)屏幕，淘寶的一位前端老板編寫了一個(gè)經(jīng)過改編的JS，叫做flexible，可以在GitHub找到

為什么很多web項(xiàng)目還是使用px，而不是rem？

在移動(dòng)終端剛剛流行的初期，為了使手機(jī)頁面適應(yīng)不同大小的手機(jī)屏幕，淘寶的一位前端老板編寫了一個(gè)經(jīng)過改編的JS，叫做flexible，可以在GitHub找到。原理很簡單。似乎根據(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這些單位有哪些不同之處？

像素。相對(duì)長度單位。像素PX與顯示屏的分辨率有關(guān)。EM是相對(duì)長度的單位。相對(duì)于當(dāng)前對(duì)象中文本的字體大小。如果未手動(dòng)設(shè)置行內(nèi)文本的當(dāng)前字體大小，則該字體大小與瀏覽器的默認(rèn)字體大小有關(guān)。任何瀏覽器的默認(rèn)字體高度都是16px。所有未調(diào)整的瀏覽器都符合：1em=16px。然后12px=0.75em，10px=0.625em，為了簡化字體大小的轉(zhuǎn)換，需要在CSS的body selector中聲明font size=62.5%，使EM value變成16px*62.5%=10px，所以12px=1.2em，10px=1em，也就是說，只需要將原來的PX值除以10，然后用EM作為單位來替換。EM特征1。EM值不是固定的。EM繼承父元素的字體大小。因此，在編寫em時(shí)，我們需要注意兩點(diǎn)：1。在正文選擇器中聲明font size=62.5%；2。把你原來的PX值除以10，然后用em作為單位來代替；3。重新計(jì)算那些放大字體的EM值。避免重復(fù)聲明字體大小。Rem是CSS3中一個(gè)新的相對(duì)單位（根EM），引起了廣泛的關(guān)注。這個(gè)單位和他們有什么區(qū)別？區(qū)別在于，當(dāng)rem用于設(shè)置元素的字體大小時(shí)，它仍然是相對(duì)大小，但相對(duì)大小只是HTML根元素。該裝置具有相對(duì)尺寸和絕對(duì)尺寸的優(yōu)點(diǎn)。它只需修改根元素就可以按比例調(diào)整所有字體大小，避免了字體大小層層復(fù)合的連鎖反應(yīng)。目前，除了IE8和早期版本外，所有瀏覽器都支持rem。