CSS3用rem,em,px設置字體大小

時間 2019-11-17

標籤 css3 css rem 設置字體大小欄目 CSS 简体版

原文原文鏈接

PX爲單位

相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。css

在Web頁面初期製做中，咱們都是使用「px」來設置咱們的文本，由於他比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，他改變了瀏覽器的字體大小，這時會使咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了。所以，這時就提出了使用「em」來定義Web頁面的字體。html

PX特色css3

1. IE沒法調整那些使用px做爲單位的字體大小；瀏覽器

2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；佈局

3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。字體

em爲單位

相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。網站

前面也說了，使用是「px」爲單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，咱們可使用「em」單位。
spa

任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。htm

爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。對象

這種技術須要一個參考點，通常都是以<body>的「font-size」爲基準。好比說咱們使用「1em」等於「10px」來改變默認值「1em=16px」，這樣一來，咱們設置字體大小至關於「14px」時，只須要將其值設置爲「1.4em」。

body {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
h1 {font-size: 2.4em; /*2.4em × 10 = 24px */}
p {font-size: 1.4em; /*1.4em × 10 = 14px */}
li {font-size: 1.4em; /*1.4 × ? = 14px ? */}

爲何「li」的「1.4em」是否是「14px」將是一個問號呢？

由於在使用「em」做單位時，必定須要知道其父元素的設置，由於「em」就是一個相對值，並且是一個相對於父元素的值，

其真正的計算公式是：1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

這樣的狀況下「1.4em」能夠是「14px」,也能夠是「20px」，或者說是「24px」，總之是一個不肯定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用「1em」。這樣一來可能又不是咱們所須要的方法。

EM特色

1. em的值並非固定的；

2. em會繼承父級元素的字體大小。

Rem爲單位

rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值，，在根元素中設置多大的字體，這徹底能夠根據您本身的需，你們也能夠參考下圖：

咱們來看一個簡單的代碼實例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個基本字體大小爲62.5%（也就是10px。設置這個值主要方便計算，若是沒有設置，將是以「16px」爲基準 ）。
從上面的計算結果，咱們使用「rem」就像使用「px」同樣的方便，並且同時解決了「px」和「em」二者不一樣之處。

瀏覽器的兼容性

rem是CSS3新引進來的一個度量單位，支持的瀏覽器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。

不過使用單位設置字體，可不能徹底不考慮IE了，若是你想使用這個REM，但也想兼容IE下的效果，你可考慮「px」和「rem」一塊兒使用，用"px"來實現IE6-8下的效果，而後使用「Rem」來實現代瀏覽器的效果

長度單位	版本	描述
文本相對長度單位 Font-relative Length Units
em	CSS1	相對於當前對象內文本的字體尺寸
ex	CSS1	相對於字符「x」的高度。一般爲字體高度的一半
ch	CSS3	數字「0」的寬度
rem	CSS3	相對於根元素(即html元素)font-size計算值的倍數
視口相對長度單位 Viewport-relative Length Units
vw	CSS3	相對於視口的寬度。視口被均分爲100單位的vw
vh	CSS3	相對於視口的高度。視口被均分爲100單位的vh
vmax	CSS3	相對於視口的寬度或高度，老是相對於大的那個。視口的寬度或高度被均分爲100單位的vmax
vmin	CSS3	相對於視口的寬度或高度，老是相對於小的那個。視口的寬度或高度被均分爲100單位的vmin
絕對長度單位 Absolute Length Units
cm	CSS1	釐米
mm	CSS1	毫米
q	CSS3	1/4毫米（quarter-millimeters）; 1q = 0.25mm
in	CSS1	英寸（inches）; 1in = 2.54cm
pt	CSS1	點（points）; 1pt = 1/72in
pc	CSS1	派卡（picas）; 1pc = 12pt
px	CSS1	像素（pixels）; 1px = 1/96in

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。