關于字體大小px與rem混用的個人經驗

since1986 發布于2019-08-30 13:02 / 2917人閱讀

摘要：關于與的區別，網上已經有不少文章了，在此不多談。主要想談的是在制作網頁時，什么時候設定字體大小用，什么時候用先談結論，再講為什么。一般情況下，還是以用為主，只有當需要在不同設備上顯示不同大小的字體時，再用。

關于rem與px的區別，網上已經有不少文章了，在此不多談。主要想談的是：在制作網頁時，什么時候設定字體大小用px，什么時候用rem？

先談結論，再講為什么。一般情況下，還是以用px為主，只有當需要在不同設備上顯示不同大小的字體時，再用rem。

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

但是有時候這里會出現一個小問題：在做標題的時候，設計師覺得在小屏幕上用16px顯示5個漢字沒有問題，但是在大屏幕上用16px顯示5個漢字，就太小了，會顯得整個屏幕空空蕩蕩，在這種情況下，就需要用到rem了。（em我就不想再談了，沒有意義，要用就直接用rem，關于這兩者的區別，可以自行百度）

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

直接上代碼，可能說的更明白：

/*手機端的標準字體大小為16px*/
html {
    font-size: 16px;
}
@media only screen and (min-width : 320px) {
}
/*當屏幕寬度大于480像素時，將采用以下字體大小為標準大小，下同*/
@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;
    }
}

不用擔心，這里所設置的字體大小不會影響到你的任何直接定義為px的字體大小，這里的字體大小只有在一種情況下發生作用，那就是使用rem的時候。

回到剛才的例子，手機上一行顯示5個漢字的時候，因為手機屏幕小，所以就用16px的字體就夠了，所以我們就用1rem，當我們寫完font-size:1rem的時候，它在大屏幕上，根據上面的設定，自動就變成22px了。

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

2016年6月8日補充：
其實em也不是完全毫無用處，在用于首行縮進以及行高時，只能用em，而不能用rem。舉個例子：


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

在這種情況下，你如果把上面兩處的2em改成2rem，反而不對了?？梢栽趈sfiddle里做實驗調試一下就知道了。

GPU云服務器云服務器 px2rem html文字大小px 字體大小關于云桌面與云服務器的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115252.html

px、em和rem實戰經驗

摘要：前言在自適應布局或者移動端網頁開發時，我們經常會用到和兩個長度單位。，相對長度單位。相對于當前對象內文本的字體尺寸。所有未經調整的瀏覽器中都是。最大的優點是提供一致尺寸，便于計算。為了還原設計稿和實現合理的布局所以需要根元素重寫。前言在自適應布局或者移動端網頁開發時，我們經常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區別，以及他們的使用場景等。區別 ...

xietao3 2019-08-30 15:54 評論0 收藏0
關于CSS中的字體尺寸設置

摘要：常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時，應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。個人翻譯，轉載請注明出處英文原文：CSS Font Sizing 寫在前面上一篇文章如何做好移動端的響應式設計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設定字體...

mcterry 2019-08-28 18:09 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

Benedict Evans 2019-08-21 10:44 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

wangjuntytl 2019-08-28 18:21 評論0 收藏0
實習一周，做了公司官網，談談關于大學生找實習工作以及記錄前端響應式布局開發心得

摘要：關于文字個人感覺使用單位結合媒體查詢最好做移動端頁面。這些話是勉勵自己，也送給還未走出象牙塔的學弟學妹，和剛進入社會工作還在迷茫的同胞們。關于彈性布局：　　display:flex;很好用，將元素放在一排，盒子可用寬度百分比，可替代浮動，雖然浮動也能做到，但是還要清除浮動，多此一舉，還可以實現居中等布局效果，但有兼容性問題，特別是justify-content:space-between，...

BicycleWarrior 2019-04-23 13:24 評論0 收藏0