摘要:常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時,應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位,通過寬度來計算字體尺寸。
寫在前面</>復制代碼
個人翻譯,轉載請注明出處
英文原文:CSS Font Sizing
上一篇文章如何做好移動端的響應式設計:Viewport控制討論到了CSS像素,于是我決定研究一下如何用不同的方式來在CSS中設定字體大小。
常用單位在CSS中可以用很多不同的方式來設定字體的尺寸。一般來說,這些單位被分成兩大類:絕對單位(absolute)和相對單位(relative)。
絕對單位在大多數情況下是相對于某些實際量度而言的固定值,即是說它們一旦設定,就不會因為其他元素的字體尺寸變化而變化。
相對單位沒有一個固定的度量值,而是由父元素尺寸來決定的相對值,它們的尺寸會根據與其相關的元素改變而改變。
下面是對這些單位的一個簡單整理:
單位 | 類型 | 描述 |
---|---|---|
px | Absolute | 1個Viewport像素 |
pt | Absolute | 1pt = 1/72英寸 |
pc | Absolute | 1pc = 12pt |
% | Relative | 相對于父元素的字體尺寸 |
em | Relative | 相對于父元素的字體尺寸 |
rem | Relative | (即root em) 相對于html標簽的字體尺寸 |
keyword | Relative | xx-small, x-small, small, medium, large, x-large, xx-large |
vw | Relative | 相當于Viewport寬度的1/100 |
vh | Relative | 相當于Viewport高度的1/100 |
vmin | Relative | 相當于Viewport高寬中長度相對較小的1/100 |
vmax | Relative | 相當于Viewport高寬中長度相對較大的1/100 |
這里主要關注這幾個單位:px、pt、%、em、rem和vw。
它們之間有什么區別?從概念上很難理解這些單位之間的差別,所以下面用一些實例來說明。
例1. 默認設定當你不設定字體尺寸時,HTML會提供一個默認的尺寸設定。大多數瀏覽器中和標簽中的默認字體尺寸是100%,沒有概念?看這個等式:
</>復制代碼
100% = 1em = 1rem = 16px = 12pt
還是不懂?那就換個說法,比如說你給一個
設置字體尺寸為100%,給另一個
設置為16px,在屏幕上看到的這兩個
中的字體大小是一樣的,下圖列出了用幾個不同單位設置的字體尺寸,可以看出是一樣大的:
改變的字體尺寸可以很明顯的看出絕對單位和相對單位的差別。如果把設置為html { font-size: 200% },就會影響所有使用相對單位的
。效果如下圖:
這就是相對單位最主要的優勢了,借助相對單位的這種特性就可以設計出真正的響應式頁面,而所要做的只是修改的字體尺寸
em(或者%)需要通過父元素的字體尺寸來計算尺寸:
</>復制代碼
html {
font-size: 100% /* =16px */
}
body {
font-size: 2em; /* =32px */
}
p {
font-size: 1em; /* =32px */
/* font-size: 0.5em; =16px */
}
因為
是的子元素,而是的子元素,所以
中的em和%將是之前的兩倍。
當你為一個元素添加em單位時,應當考慮到所有父元素的字體尺寸。如你所見,這樣很容易使人混亂。
使用rem可以很好的解決這個問題。rem只需要計算的字體尺寸而不需要考慮父元素。如下代碼所示:
</>復制代碼
html {
font-size: 100% /* =16px */
}
body {
font-size: 2rem; /* =32px */
}
p {
font-size: 1rem; /* =16px */
}
使用rem可以讓你擁有和em/%同樣的縮放能力,但不必去考慮那些復雜的嵌套關系。
例4. Viewport寬度vw是CSS3中新提出的一個單位,通過Viewport寬度來計算字體尺寸。這樣就可以設計出更加靈活的響應式字體。
雖然這個單位看上去非常適合用于響應式設計,但就我個人而言不是很熱衷于它。在使用vw的過程中我并不能很好的控制字體的大小,不是太大就是太小。
當我在寫這篇文章時,我僅使用px來作為單位。因為現在大多數瀏覽器都允許用戶放大頁面,這樣做就不會有可訪問性的問題。
然而,我發現了這個具有一定限制力的方式。雖然我的字體尺寸在中小型屏幕上看起來還行,但在大屏幕上會被優化的更好。盡管用戶可以自行設定放大的屬性,但是我們希望可以盡量減少用戶的工作。
我的解決方案是使用rem,并使用px作為備用單位。
</>復制代碼
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
像下面這樣寫就可以允許我按比例來放大我的字體尺寸:
</>復制代碼
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
這個方案之所以使用px作為備用單位,是因為rem不支持IE8及其以下版本。這個方案有一個問題,就是像上面這樣改變基礎字體尺寸時,并不能對備用字體尺寸起到作用。不過,我不覺得這個問題多么大,因為這個匹配大型設備尺寸的能力只不過是為了錦上添花而已,并不是一個核心功能。
如果你在這個問題上有一些更好的點子,可以評論或私信給我。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111057.html
摘要:前言在自適應布局或者移動端網頁開發時,我們經常會用到和兩個長度單位。,相對長度單位。相對于當前對象內文本的字體尺寸。所有未經調整的瀏覽器中都是。最大的優點是提供一致尺寸,便于計算。為了還原設計稿和實現合理的布局所以需要根元素重寫。 前言 在自適應布局或者移動端網頁開發時,我們經常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區別,以及他們的使用場景等。 區別 ...
摘要:但問題是究竟該用還是呢關于這個問題一直存在比較大的爭議。上述現象的出現,是因為是相對于當前元素字體的大小。什么是表示,它是相對于根元素的長度單位。還是在項目開發中究竟是選用還是一直以來爭議不斷。這就是前述規則中的第一條規則。 簡言 應用象EM 和 REM這種相對長度單位進行頁面排版是WEB開發中的最佳實踐。在頁面排版中較好應用EM 和 REM,根據設備尺寸縮放顯示元素的大小。這就使得組...
摘要:國內各大公司都已經投入使用,在一些常見的網站,如淘寶騰訊小米等移動站點,隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及,這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現; 作用于某個元素上的樣式又可能來自單個樣式規...
摘要:國內各大公司都已經投入使用,在一些常見的網站,如淘寶騰訊小米等移動站點,隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及,這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現; 作用于某個元素上的樣式又可能來自單個樣式規...
閱讀 1388·2021-11-24 09:38
閱讀 2090·2021-09-22 15:17
閱讀 2386·2021-09-04 16:41
閱讀 3479·2019-08-30 15:56
閱讀 3516·2019-08-29 17:19
閱讀 1977·2019-08-28 18:09
閱讀 1254·2019-08-26 13:35
閱讀 1715·2019-08-23 17:52