資訊專欄INFORMATION COLUMN
摘要：關(guān)于與的區(qū)別，網(wǎng)上已經(jīng)有不少文章了，在此不多談。主要想談的是在制作網(wǎng)頁時，什么時候設(shè)定字體大小用，什么時候用先談結(jié)論，再講為什么。一般情況下，還是以用為主，只有當(dāng)需要在不同設(shè)備上顯示不同大小的字體時，再用。
關(guān)于rem與px的區(qū)別，網(wǎng)上已經(jīng)有不少文章了，在此不多談。主要想談的是：在制作網(wǎng)頁時，什么時候設(shè)定字體大小用px，什么時候用rem？
先談結(jié)論，再講為什么。一般情況下，還是以用px為主，只有當(dāng)需要在不同設(shè)備上顯示不同大小的字體時，再用rem。
舉個極端例子，一個網(wǎng)頁，需要在最大屏幕3000px(為了方便起見，我們這里只談屏幕寬度)上顯示，同時也需要在最小屏幕320px上顯示。不管屏幕多大，人的肉眼能看清楚的字體大小都是16px（我們只是假設(shè)，也可以是14px甚至12px，但先假設(shè)為16px）。通常情況下，把字體大小設(shè)置為16px是沒有問題的，這樣的話，在小屏幕上，一行能顯示20個漢字，大屏幕上一行能顯示200個漢字，多少沒關(guān)系，多了就自動換行唄，無非就是大屏幕上看起來文章較短，而小屏幕上看起來文章較長，但人的眼睛都能看得清，這是沒有問題的。
但是有時候這里會出現(xiàn)一個小問題：在做標(biāo)題的時候，設(shè)計師覺得在小屏幕上用16px顯示5個漢字沒有問題，但是在大屏幕上用16px顯示5個漢字，就太小了，會顯得整個屏幕空空蕩蕩，在這種情況下，就需要用到rem了。（em我就不想再談了，沒有意義，要用就直接用rem，關(guān)于這兩者的區(qū)別，可以自行百度）
談rem不談base font毫無意義，談base font不談屏幕尺寸也毫無意義。
直接上代碼，可能說的更明白：
/*手機端的標(biāo)準(zhǔn)字體大小為16px*/
html {
font-size: 16px;
}
@media only screen and (min-width : 320px) {
}
/*當(dāng)屏幕寬度大于480像素時，將采用以下字體大小為標(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è)置的字體大小不會影響到你的任何直接定義為px的字體大小，這里的字體大小只有在一種情況下發(fā)生作用，那就是使用rem的時候。
回到剛才的例子，手機上一行顯示5個漢字的時候，因為手機屏幕小，所以就用16px的字體就夠了，所以我們就用1rem，當(dāng)我們寫完font-size:1rem的時候，它在大屏幕上，根據(jù)上面的設(shè)定，自動就變成22px了。
調(diào)的時候的順序一定要搞清，不要兩邊來回亂調(diào)，而一定是要手機優(yōu)先，先在小屏幕上用px確保字體顯示正常了，再放到大屏幕上看，如果哪塊覺得太空，需要放大字體，那么再回到小屏幕上，改寫為rem，然后再放到大屏上看。
2016年6月8日補充：
其實em也不是完全毫無用處，在用于首行縮進(jìn)以及行高時，只能用em，而不能用rem。舉個例子：
中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國
中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國中華人民共和國
在這種情況下，你如果把上面兩處的2em改成2rem，反而不對了。可以在jsfiddle里做實驗調(diào)試一下就知道了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115252.html
摘要：前言在自適應(yīng)布局或者移動端網(wǎng)頁開發(fā)時，我們經(jīng)常會用到和兩個長度單位。，相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。所有未經(jīng)調(diào)整的瀏覽器中都是。最大的優(yōu)點是提供一致尺寸，便于計算。為了還原設(shè)計稿和實現(xiàn)合理的布局所以需要根元素重寫。 前言 在自適應(yīng)布局或者移動端網(wǎng)頁開發(fā)時，我們經(jīng)常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區(qū)別，以及他們的使用場景等。 區(qū)別 ...
摘要：常用單位在中可以用很多不同的方式來設(shè)定字體的尺寸。當(dāng)你為一個元素添加單位時，應(yīng)當(dāng)考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。 個人翻譯，轉(zhuǎn)載請注明出處 英文原文：CSS Font Sizing 寫在前面 上一篇文章如何做好移動端的響應(yīng)式設(shè)計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設(shè)定字體...
摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點設(shè)置一個基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時的問題 在這之前做web app開發(fā)的的時候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設(shè)計稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個大概值，各種圖標(biāo)的...
摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點設(shè)置一個基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時的問題 在這之前做web app開發(fā)的的時候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設(shè)計稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個大概值，各種圖標(biāo)的...
摘要：關(guān)于文字個人感覺使用單位結(jié)合媒體查詢最好做移動端頁面。這些話是勉勵自己，也送給還未走出象牙塔的學(xué)弟學(xué)妹，和剛進(jìn)入社會工作還在迷茫的同胞們。關(guān)于彈性布局： display:flex;很好用，將元素放在一排，盒子可用寬度百分比，可替代浮動，雖然浮動也能做到，但是還要清除浮動，多此一舉，還可以實現(xiàn)居中等布局效果，但有兼容性問題，特別是justify-content:space-between，...
閱讀 3562·2021-08-31 09:39
閱讀 1869·2019-08-30 13:14
閱讀 2932·2019-08-30 13:02
閱讀 2778·2019-08-29 13:22
閱讀 2356·2019-08-26 13:54
閱讀 778·2019-08-26 13:45
閱讀 1597·2019-08-26 11:00
閱讀 990·2019-08-26 10:58
