在進行頁面響應式設計中，往往需要根據屏幕分辨率來顯示不同大小的字體。通常的做法是通過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高或寬的大小。
文章列表
留言列表
