成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于字體大小px與rem混用的個(gè)人經(jīng)驗(yàn)

since1986 / 2990人閱讀

摘要:關(guān)于與的區(qū)別,網(wǎng)上已經(jīng)有不少文章了,在此不多談。主要想談的是在制作網(wǎng)頁時(shí),什么時(shí)候設(shè)定字體大小用,什么時(shí)候用先談結(jié)論,再講為什么。一般情況下,還是以用為主,只有當(dāng)需要在不同設(shè)備上顯示不同大小的字體時(shí),再用。

關(guān)于rem與px的區(qū)別,網(wǎng)上已經(jīng)有不少文章了,在此不多談。主要想談的是:在制作網(wǎng)頁時(shí),什么時(shí)候設(shè)定字體大小用px,什么時(shí)候用rem?

先談結(jié)論,再講為什么。一般情況下,還是以用px為主,只有當(dāng)需要在不同設(shè)備上顯示不同大小的字體時(shí),再用rem。

舉個(gè)極端例子,一個(gè)網(wǎng)頁,需要在最大屏幕3000px(為了方便起見,我們這里只談屏幕寬度)上顯示,同時(shí)也需要在最小屏幕320px上顯示。不管屏幕多大,人的肉眼能看清楚的字體大小都是16px(我們只是假設(shè),也可以是14px甚至12px,但先假設(shè)為16px)。通常情況下,把字體大小設(shè)置為16px是沒有問題的,這樣的話,在小屏幕上,一行能顯示20個(gè)漢字,大屏幕上一行能顯示200個(gè)漢字,多少?zèng)]關(guān)系,多了就自動(dòng)換行唄,無非就是大屏幕上看起來文章較短,而小屏幕上看起來文章較長,但人的眼睛都能看得清,這是沒有問題的。

但是有時(shí)候這里會(huì)出現(xiàn)一個(gè)小問題:在做標(biāo)題的時(shí)候,設(shè)計(jì)師覺得在小屏幕上用16px顯示5個(gè)漢字沒有問題,但是在大屏幕上用16px顯示5個(gè)漢字,就太小了,會(huì)顯得整個(gè)屏幕空空蕩蕩,在這種情況下,就需要用到rem了。(em我就不想再談了,沒有意義,要用就直接用rem,關(guān)于這兩者的區(qū)別,可以自行百度)

談rem不談base font毫無意義,談base font不談屏幕尺寸也毫無意義。

直接上代碼,可能說的更明白:

/*手機(jī)端的標(biāo)準(zhǔn)字體大小為16px*/
html {
    font-size: 16px;
}
@media only screen and (min-width : 320px) {
}
/*當(dāng)屏幕寬度大于480像素時(shí),將采用以下字體大小為標(biāo)準(zhǔn)大小,下同*/
@media only screen and (min-width : 480px) {
    html {
        font-size: 18px;
    }
}
@media only screen and (min-width : 768px) {
    html {
        font-size: 20px;
    }
}
@media only screen and (min-width : 992px) {
    html {
        font-size: 20px;
    }
}
@media only screen and (min-width : 1200px) {
    html {
        font-size: 22px;
    }
}

不用擔(dān)心,這里所設(shè)置的字體大小不會(huì)影響到你的任何直接定義為px的字體大小,這里的字體大小只有在一種情況下發(fā)生作用,那就是使用rem的時(shí)候。

回到剛才的例子,手機(jī)上一行顯示5個(gè)漢字的時(shí)候,因?yàn)槭謾C(jī)屏幕小,所以就用16px的字體就夠了,所以我們就用1rem,當(dāng)我們寫完font-size:1rem的時(shí)候,它在大屏幕上,根據(jù)上面的設(shè)定,自動(dòng)就變成22px了。

調(diào)的時(shí)候的順序一定要搞清,不要兩邊來回亂調(diào),而一定是要手機(jī)優(yōu)先,先在小屏幕上用px確保字體顯示正常了,再放到大屏幕上看,如果哪塊覺得太空,需要放大字體,那么再回到小屏幕上,改寫為rem,然后再放到大屏上看。

2016年6月8日補(bǔ)充:
其實(shí)em也不是完全毫無用處,在用于首行縮進(jìn)以及行高時(shí),只能用em,而不能用rem。舉個(gè)例子:


中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國

中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國

在這種情況下,你如果把上面兩處的2em改成2rem,反而不對了??梢栽趈sfiddle里做實(shí)驗(yàn)調(diào)試一下就知道了。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/115252.html

Failed to recv the data from server completely (SIZE:0/8, REASON:closed)