關於移動端rem適配的相關方案研究

1.移動端的相關適配目前探索中已經尋找了很多種的適配方案，

1）響應式布局。

2）640px/750px做一版移動端的設計圖（em適配）。

3）640px/750px做一版移動端的設計圖（rem適配）。

以上方案實際開發中本人都已經使用過，後來最終選擇第三種方案。為什麼呢？第一種響應式方案，看似簡單，實際開發中其實加大了開發的工作量，各種螢幕的適配會讓你抓狂。

第二種方案，也使用了一段時間，開發效率可以，一套下來適配多種螢幕，但是後期涉及到相關頁面的調整簡直會讓你崩潰掉，改一處-處處都在變著（因為該種方案是根據字型來調整介面，父元素的字型改了，子元素跟著改-風不瘋狂，我們配置了多少種大小的字型？），嚇得直接不敢改了，最後放棄了em適配方案。

第三種rem適配方案在開發中開始採用後發現效率-適配都很好，根據html的根子體來確定大小，

看見以下方案了吧，其實都不能很好的適配多變的移動端螢幕。

也就是用css**查詢來改變根字型的大小進行適配。該種方案也放棄了。

html 

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) 
}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) 
}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) 
}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) 
}

此處需要普及下，畫素比，螢幕密度，畫素等

詳細檢視

**的解決方案是把螢幕分成了100份（bootstrap分成了12份），

我們常用的設計稿是640px，750px，

而**的方案是 750px/100份=7.5px/份

我們得到的是  1份=7.5px

而把乙份的寬度定義為10rem，那麼750px的設計稿換算下就是，1rem=75px

ok方案基本已經確定了，但是用我們的css畫素去解決單位轉換，把px轉換成rem，計算器敲著那效率也太低了吧，**同樣有該種工具可以供使用

3.需要注意的是，**方案中meta viewpoint，html根子體font-size都是設定好的

flexible會自動設定每個螢幕寬度的根font-size、動態viewport、針對retina屏做的dpr。

git上的詳細介紹

4.關於移動端viewport的詳細介紹

5.專案的快速搭建

1）在所有檔案載入之前引入（不要設定meta為固定的）

設計稿尺寸/10=html根字型大小

例如640px/10=64px，那麼根字型就是64px。

3）單位換算

設計稿px/根字型大小

好了到此結束。

關於rem適配移動端

function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...

移動端rem適配

3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...

移動端rem適配

前端在開發移動端頁面時，通常會使用rem對不同解析度的 螢幕進行適配，以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100，px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...