有關CSS中字體響應式的設置

　　在進行頁面響應式設計中，每每須要根據屏幕分辨率來顯示不一樣大小的字體。一般的作法是經過media queries給不一樣的分辨率指定不一樣的字體樣式，例如：

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

　　除此以外，咱們還能夠經過下面的方式讓字體自適應屏幕分辨率。

1vw = viewport寬度的1%
1vh = viewport高度的1%
1vmin = 1vw或者1vh中較小的值
1vmax = 1vw或者1vh中較大的值

　　例如咱們能夠在樣式表中定義以下樣式：

h1 {
  font-size: 5.9vw;
}

h2 {
  font-size: 3.0vh;
}

p {
  font-size: 2vmin;
}

 

什麼是viewport?

　　viewport是HTML5中新加入的一個meta標記，其主要做用是爲移動客戶端的瀏覽器進行顯示優化。經過設置viewport的屬性值，能夠控制當前頁面默認採用什麼樣的方式在移動端的瀏覽器中顯示頁面。下面是一個經常使用的針對移動網頁優化過的頁面的viewport meta標記的設置項：

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

　　若是想讓頁面支持響應式設計，須要給頁面添加viewport meta標記。詳見Bootstrap中的響應式設計。

　　完整的viewport語法以下：

<!-- html document -->
<meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
            target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
        "
/>

height：控制viewport的高度，能夠指定一個固定的值，或者device-height來表示設備的高度（單位爲縮放100%時的像素值）。

width：和height對應，表示viewport的寬度。devive-width表示設備的高度。

initial-scale：頁面的初始縮放比例，值容許爲小數，表示當前頁面大小的倍數。例如2.0表示頁面初始狀態下會被放大2倍。

minimum-scale：最小容許縮放比例，值容許爲小數，表示頁面最小能以多大的倍數顯示。例如2.0表示頁面不能縮小到2倍如下進行顯示。

maxmium-scale：和minimun-scale對應，表示最大容許縮放比例。

user-scalable：是否容許用戶縮放頁面。默認值爲yes，當設置爲no時minimum-scale和maximum-scale無效。

target-densitydpi：指定頁面在什麼樣的dpi下顯示。屏幕像素密度是由屏幕分辨率來決定的，一般定義爲每英寸點的數量，即dpi。Android支持三種dpi設置：低像素密度（low-dpi），中像素密度（medium-dpi），高像素密度（high-dpi）。低像素密度的屏幕每英寸上的像素點少，而高像素密度的屏幕每英寸上的像素點多。Android Browser和WebView默認屏幕爲中像素密度。也能夠直接指定一個具體的dpi值，該值容許的範圍爲70-400之間。device-dpi表示以設備默認的dpi來顯示頁面。

　　注意：全部的縮放值都必須在0.01-10的範圍以內，不然無效。

 

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

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

em：相對長度單位。至關於當前對象內文本的字體尺寸，若是當前對行內文本的字體尺寸未被認爲設置，則相對於瀏覽器的默認字體尺寸。em的值並非固定的，它會繼承父級元素的字體大小。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。

rem：CSS3新增的一個相對單位。與em的主要區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

pt：印刷業上常使用的單位，通常用於頁面打印排版，即磅的意思。

%：另外咱們還可使用百分比來指定大小，它表示當前字體相對於瀏覽器默認字體大小的倍數。該單位在頁面響應式設計中也被常常用到。

vw/vh/vmin/vmax：上面已經介紹了，表示字體相對於viewport高或寬的大小。