說起移動端字型，就會想到它的布局方式以及布局單位，那麼以下就是幾種布局
布局方式
一、靜態布局（static layout）
即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點
不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫**時的布局來顯示。常規的pc的**都是靜態（定寬度）布局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2、設計方法
pc：居中布局，所有樣式使用絕對寬度/高度(px)，設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
優點：這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。
缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。當前，大部分門戶**、大部分企業的pc宣傳站點都採用了這種布局方式。固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。
二、流式布局（liquid layout），也成百分比布局
流式布局（liquid）的特點（也叫"fluid")是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。也作類似處理（width:100%, max-width一般設定為本身的尺寸，防止被拉伸而失真）。
1.布局特點
螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變。【這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
2.設計方法
使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport)和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種布局方式在web前端開發的早期歷史上，用來應對不同尺寸的pc螢幕
三、自適應布局（adaptive layout）
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。
1、布局特點
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法
使用 @media**查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。
四、響應式布局（responsive layout）
隨著css3出現了**查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保乙個頁面在所有終端上（各種尺寸的pc、手機、手錶、冰箱的web瀏覽器等等）都能顯示出令人滿意的效果，對css編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配**查詢技術使用
1.布局特點
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。
2.設計方法
**查詢+流式布局。通常使用 @media**查詢和網格系統 (grid system)配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 css給單一網頁不同裝置返回不同樣式的技術統稱。
優點：適應pc和移動端，如果足夠耐心，效果完美。
缺點：（1）**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
五、彈性布局（rem/em布局）
1. rem/em區別：rem是相對於html元素的font-size大小而言的，而em是相對於其父元素。
2.使用 em或 rem單位進行相對布局，相對%百分比更加靈活，同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣
3.瀏覽器的預設字型高度一般為16px，即1em:16px,為了方便計算，因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px
布局單位
原因：1、因為px在pc端很流行但不適合於移動端，所以專門設計的彈性布局方式，來更好地適用於移動端，所以才會出現rem和em,em
2、物理畫素(physical pixel) 我們看到的每個螢幕都是由一顆顆我們肉眼難以看到的小顆粒（物理畫素）組成的。
3、邏輯畫素 是計算機座標系統中的乙個點，這個點代表乙個可以由程式使用的虛擬畫素(比如說css畫素)。
4、裝置的畫素比(device pixel ratio)簡稱dpr 它的數值體現了物理畫素和邏輯畫素之間的關係，用公式可以計算出該裝置的dpr的大小：
dpr = 物理畫素 / 邏輯畫素
所以這就是在電腦顯示的字型為什麼和手機顯示的字型大小不一致，都是因為dpr的因素
em element 是參照自己的字型的大小 如果自己沒有設定 那麼繼續往父元素上找
rem root element 實參根元素的字型大小，也就是html的
一、用**查詢來設定html的字型
@media screen and (min-width: 320px) }案列@media screen and (min-width: 360px)
}
二、這是使用js動態設定rem來實現移動端字型的大小
移動端字型設定
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windows ...
移動端字型設定最佳實踐
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windowns...
移動端字型
一直不知道手機端用的什麼字型，只是覺得類似雅黑，直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。前人已栽樹，後人我就直接轉來吧 回想2年前剛開始接觸手機專案，接到psd稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義 font family ...