設(shè)計(jì)網(wǎng)頁(yè)用什么軟件 網(wǎng)頁(yè)設(shè)計(jì)里的字體怎么改變r(jià)em格式?
網(wǎng)頁(yè)設(shè)計(jì)里的字體怎么改變r(jià)em格式?響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì):REM和EM自適應(yīng)設(shè)置網(wǎng)頁(yè)的字體大小“REM”指的是根元素(HTML)的字體大小。令人高興的是,他們已經(jīng)預(yù)約從IE6到chrome。根元素的默認(rèn)字體
網(wǎng)頁(yè)設(shè)計(jì)里的字體怎么改變r(jià)em格式?
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì):REM和EM自適應(yīng)設(shè)置網(wǎng)頁(yè)的字體大小
“REM”指的是根元素(HTML)的字體大小。令人高興的是,他們已經(jīng)預(yù)約從IE6到chrome。根元素的默認(rèn)字體大小是16px。這樣一個(gè)新裝置的兼容性如何?
IE9,F(xiàn)irefox、chrome、Safari和opera的主流版本都支持它。我可以自由使用REM。
在實(shí)際中使用基于EM的計(jì)算是不方便的。所以REM的出現(xiàn)拯救了像我這樣不會(huì)算術(shù)的人。他們不必再擔(dān)心父元素的字體大小,因?yàn)樗偸腔诟兀℉TML)。
例如,默認(rèn)的HTML字體大小=16px,那么我想將12px的文本設(shè)置為:12△16=0.75(REM)
當(dāng)然,您可以引入CSS預(yù)處理工具(SASS、less、stylus等)來自動(dòng)計(jì)算REM值,所以這里我不一一給您舉例。
但是如果像我這樣的懶人或團(tuán)隊(duì)沒有引入CSS預(yù)處理工具呢?我能移動(dòng)一個(gè)計(jì)算器嗎?別擔(dān)心。你可以做些改變。讓我們改變默認(rèn)字體大小=10px的HTML計(jì)算!像這樣:
html{字體-尺寸:62.5%/*10÷16=62.5%*/}正文{字體-大小:12px字體大?。?.2rem/*12÷10=1.2*/}p{字體-大小:14px字體大小需要注意的是,為了與不支持rem的瀏覽器兼容,我們需要在rem前面寫上相應(yīng)的PX值,因此,不支持REM的瀏覽器可以正常降級(jí)。其實(shí),不用太擔(dān)心。這是默認(rèn)字體-尺寸:100%,或設(shè)置為字體-尺寸:62.5%如果引入CSS預(yù)處理工具,自然可以使用默認(rèn)值。如果您出于其他原因使用字體-尺寸:62.5%可以重置正文中的默認(rèn)字體大小。
為什么很多web項(xiàng)目還是使用px,而不是rem?
在移動(dòng)終端剛剛流行的早期,為了使手機(jī)頁(yè)面適應(yīng)不同大小的手機(jī)屏幕,淘寶網(wǎng)的一位前端老板寫了一個(gè)經(jīng)過改編的JS,叫做flexible,可以在GitHub找到。原理很簡(jiǎn)單。似乎根據(jù)手機(jī)的分辨率和DPI(我不記得了),動(dòng)態(tài)設(shè)置根元素HTML的fontsize,然后頁(yè)面元素的大小就是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兼容的公司