現(xiàn)在我們在做網(wǎng)站的時(shí)候，都按照響應(yīng)式制作。但是又時(shí)候字體怎么設(shè)置都屏幕不一樣。效果感覺有點(diǎn)不太一樣。今天就來研究一下響應(yīng)式字體是怎么實(shí)現(xiàn)了。

看了一些資料。想要響應(yīng)式主要是字體設(shè)置單位不一樣，單位主要如下：

1vw = viewport寬度的1%

1vh = viewport高度的1%

1vmin = 1vw或者1vh中較小的值

1vmax = 1vw或者1vh中較大的值

CSS中幾種不同單位之間的比較

px：像素（Pixel）。相對長度單位，所占大小由屏幕分辨率決定。

em：相對長度單位。相當(dāng)于當(dāng)前對象內(nèi)文本的字體尺寸，如果當(dāng)前對行內(nèi)文本的字體尺寸未被認(rèn)為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。em的值并不是固定的，它會繼承父級元素的字體大小。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。

rem：CSS3新增的一個(gè)相對單位。與em的主要區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對大小，但相對的只是HTML根元素。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個(gè)絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。

pt：印刷業(yè)上常使用的單位，一般用于頁面打印排版，即磅的意思。

%：另外我們還可以使用百分比來指定大小，它表示當(dāng)前字體相對于瀏覽器默認(rèn)字體大小的倍數(shù)。該單位在頁面響應(yīng)式設(shè)計(jì)中也被經(jīng)常用到。

vw/vh/vmin/vmax：上面已經(jīng)介紹了，表示字體相對于viewport高或?qū)挼拇笮　?/p>

響應(yīng)式頁面還要添加viewport

什么是viewport?

　　viewport是HTML5中新加入的一個(gè)meta標(biāo)記，其主要作用是為移動(dòng)客戶端的瀏覽器進(jìn)行顯示優(yōu)化。通過設(shè)置viewport的屬性值，可以控制當(dāng)前頁面默認(rèn)采用什么樣的方式在移動(dòng)端的瀏覽器中顯示頁面。下面是一個(gè)常用的針對移動(dòng)網(wǎng)頁優(yōu)化過的頁面的viewport meta標(biāo)記的設(shè)置項(xiàng)：

<meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1"/>