作為乙個前端開發人員，我們的任務是將ui設計師的圖稿運用計算機語言呈現在使用者面前。而現在的裝置大小尺寸不一，近年來智慧型手機的普及更是讓網頁的使用者大部分**與手機，所以讓不同大小的移動端螢幕都能較好的還原設計稿就成了乙個前端開發者需要解決的當務之急。我查閱了大量資料和進行了一些實踐，下面是我對移動端適配的一些認識。
首先我們來談談我們在電腦端用的字型單位px和em任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 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作為單位就行了。
em有如下特點：
1. em的值並不是固定的;
2. em會繼承父級元素的字型大小。
所以我們在寫css的時候，需要注意兩點：
1. body選擇器中宣告font-size=62.5%;
2. 將你的原來的px數值除以10，然後換上em作為單位;
3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。
下面我們來談談移動端的適配方案首先講講乙個基本概念
視窗 viewport
移動前端中常說的 viewport （視口）就是瀏覽器顯示頁面內容的螢幕區域。
移動端的viewport太窄，為了能更好為css布局服務，所以提供了兩個viewport:虛擬的visual viewport和布局的layout viewport。
layout viewport（布局視口）
一般移動裝置的瀏覽器都預設設定了乙個viewport 元標籤，定義乙個虛擬的layout viewport（布局視口），用於解決早期的頁面在手機上顯示的問題。ios, android基本都將這個視口解析度設定為 980px，所以pc上的網頁基本能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁。
這裡是乙個小demo，分別是加了和沒加頁面的效果
visual viewport（視覺視口）和物理畫素
dip （裝置邏輯畫素）跟裝置的硬體畫素無關的。乙個 dip 在任意畫素密度的裝置螢幕上都佔據相同的空間。
比如macbook pro的 retina （視網膜）屏顯示器硬體畫素是：2880 * 1800。當你設定螢幕解析度為 1920 * 1200 的時候，ideal viewport（理想視口）的寬度值是1920畫素， 那麼 dip 的寬度值就是1920。裝置畫素比是1.5（2880/1920）。裝置的邏輯畫素寬度和物理畫素寬度（畫素解析度）的關係滿足如下公式：
邏輯畫素寬度*倍率 = 物理畫素寬度
而移動端手機螢幕通常不可以設定解析度，一般都是裝置廠家預設設定的固定值，換句話說 dip 的值就是 ideal viewport（理想視口）（也就是解析度）的值，比如，iphone的螢幕解析度：
iphone5 ：解析度 320 * 568，物理畫素 640 * 1136，@2x
iphone6：解析度 375 * 667，物理畫素 750 * 1334，@2x
iphone6 plus ：解析度 414 * 736，物理畫素1242 * 2208，@3x
所以我們需要使用viewport元標籤控制布局
通常用到的適配**
為了是適應布局，我們一般將width設為device-width。
width=device-width 也就是將layout viewport（布局視口）的寬度設定 ideal viewport（理想視口）的寬度。網頁縮放比例為100%時，乙個css畫素就對應乙個 dip（裝置邏輯畫素），而layout viewport（布局視口）的寬度，ideal viewport（理想視口）的寬度（通常說的解析度），dip 的寬度值是相等的。
initial-scale
initial-scale用於指定頁面的初始縮放比例：
因為解析度和物理畫素的關係，所以我們就需要通過js來確定頁面的初始縮放比例，下面是控制初始縮放比例的**。後面會進行解釋
a = 1 / i,
然後我們談談rem
rem其實和em非常相似，在w3c中是這樣描述rem的
font size of the root element.它的用法和em差不多，區別是em是針對父元素的font-size做計算，而rem是相對與根元素做計算。我們在移動端使用rem作為所有大小的單位來解決適配的問題。
我們設定根元素font-size的大小，應該是不同螢幕設定不一樣的。比如乙個740大的螢幕，我們會把它的font-size設為76px；而乙個370大的螢幕，我們會把它的font-size設為34px，這要根據螢幕大小而言。
所以，我們需要編寫乙個js檔案來適應不同的螢幕這是某個**的移動適配js，這裡通過這個檔案做一些解釋
!function(e)
var n,
a = 1 / i,
d = document.documentelement,
o = document.createelement("meta");
if (e.dpr = i,
e.addeventlistener("resize", function() , !1),
e.addeventlistener("pageshow", function(e) , !1),
d.setattribute("data-dpr", i), o.setattribute("name", "viewport"),
o.setattribute("content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no"), d.firstelementchild)
else
t();
}(window), document.addeventlistener("domcontentloaded", function() ',
}, !1);
我們在開發過程中拿到的設計稿都是以px作為單位的，那我們在進行移動端程式設計的時候該怎樣對應rem大小呢?
e.rem = d.getboundingclientrect().width / 16縮放比例
前面已經提到，針對不同的裝置，螢幕解析度和物理畫素的倍速不同所以我們要通過獲取裝置來設定縮放比例。
a = 1 / i,
關於移動適配的meta標籤，我們是不用事先編寫的，通過這個js檔案，將自動建立meta標籤。
Rem 自適應布局
1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小，調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換，發現 並沒有 自適應...
rem自適應原理
目前有兩種，一種是根據js來調整html的字型大小，另一種則是通過 查詢來調整字型大小。使用js function designwidth,maxwidth if width maxwidth 與 做法不同，直接採用簡單的rem換算方法1rem 100px var rem width 100 des...
自適應rem布局
自適應處理 假設 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...