有關CSS中字型響應式的設定，css中字型響應

有關CSS中字型響應式的設定，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″></meta>

　　如果想讓頁面支援響應式設計，需要給頁面添加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高或寬的大小。