在進行頁面響應式設計中，往往需要根據螢幕解析度來顯示不同大小的字型。通常的做法是通過media queries給不同的解析度指定不同的字型樣式，例如：
bodyh1@media (min-width: 768)
h1 }
除此之外，我們還可以通過下面的方式讓字型自適應螢幕解析度。
1vw = viewport寬度的1%1vh = viewport高度的1%
1vmin = 1vw或者1vh中較小的值
1vmax = 1vw或者1vh中較大的值
例如我們可以在樣式表中定義如下樣式：
h1 h2 p
什麼是viewport?
viewport是html5中新加入的乙個meta標記，其主要作用是為移動客戶端的瀏覽器進行顯示優化。通過設定viewport的屬性值，可以控制當前頁面預設採用什麼樣的方式在移動端的瀏覽器中顯示頁面。下面是乙個常用的針對移動網頁優化過的頁面的viewport meta標記的設定項：
<meta
name
="viewport"
content
="width =device-width, initial-scale=1, maximum-scale=1"
/>
如果想讓頁面支援響應式設計，需要給頁面新增viewport meta標記。詳見bootstrap中的響應式設計。
完整的viewport語法如下：
<
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高或寬的大小。
font size 62 5 響應式字型的設定
rem是相對於根元素html的預設或者自定義的文字大小進行縮放的，子元素是根元素html的字型大小縮放的。原理 相對於頁面寬度的幾分之幾，相對頁面寬度而言的，所以頁面響應比較好。html預設的1rem 16px，在響應式布局中，乙個個除來轉換成rem，太麻煩，所以重置rem body 此時1rem ...
CSS 設定移動端的CSS 響應式布局
根本宗旨 寫一次 跑在一萬種裝置上 核心思想 不就是設定寬度麼？實現方式 根據不同裝置，設定不同css樣式，設定該裝置支援的頁面寬 高 另外，在此之前，我們需要在head裡設定乙個meta標籤，viewport，來設定移動端自適應 viewport詳細資訊，可參考此處 meta viewport 附...
CSS中的響應式布局
在小型 建設中，有運用一套 來適應不同終端解析度的需求，優點 節約製作時間 節約製作成本 便於維護等優點。css3利用 查詢 media queries 即可針對不同的 型別定義不同的樣式，從而實現響應式布局 也可以針對不同的解析度設定不同的樣式。1024解析度以上 pc端 1024 768 pad...