前端移動端適配方案之rem之小白解惑

Lemon_95 發布于2019-08-02 10:16 / 3250人閱讀

移動端適配-rem:

認識移動端

做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下；

網上找不到主流android設備的數據表，就以iphone為例：

以iphone6為例：
豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；
豎屏寬的像素750，叫做物理像素，是設備實際的光點個數，要知道屏幕都是由一個一個光點組成的;
像素比（Asset）2x，就是2倍，物理像素/邏輯像素；
ppi:像素密度326,實際平方英寸的光點個數；值越高畫面越細膩，但對cpu和電池等硬件要求就越高;ppi超過163的屏幕蘋果公司起了個洋氣的名字，叫視網膜屏；

邏輯像素和物理像素的概念需要消化消化，css中的px對應的實際上是邏輯像素，比如這里寫個width:375px,是可以鋪滿橫向的iphone6;

特別提醒，這里所有的有關像素的概念都和實際的尺寸（英寸）沒有多大關系。（比如iphone6的375就比一些android的360看上去還要窄一些。）

pc端沒有這么復雜的像素比關系，什么都是1:1:1；

搞明白這些像素的關系，問題就來了，怎么在css中寫1個尺寸，就能讓所有尺寸和像素比的設備都飽和展示，比如上面說的375px,屏幕橫過來是不是就只占手機一半的位置，換個320寬的手機是不是就溢出了，有滾動條了；

認識單位rem

簡單介紹下rem和px的換算關系：1rem=html的font-size；
比如：html{font-size:100px},那么1rem就等于100px;

方案就出來了，所有單位使用rem,我們動態改變html的font-size；

實施rem方案

思路就是(一遍看不清楚，把下面的例子理解了再看一遍思路)：先有一個基準，比如375的iphone6，（為什么拿375說事，上面已經提到，我們寫的css樣式實際上只和邏輯像素有關，至于手機用幾個光點去渲染是它的事.）將html的font-size設置成容易計算的值比如100px，頁面初始化和尺寸發生變化的時候獲取屏幕的寬度（document.body.clientWidth）就好了，然后用這個值除以375，獲得一個比值，去乘以100px,最后得到的值來替換html的font-size。

html的font-size=(屏幕寬/375)*100+"px";

例如iphone6,body:{width:3.75rem};
豎屏的時候:html{font-size:375/375}*100+"px",body寬就是3.75*(375/375)*100=375px，鋪滿了吧；
把屏幕橫過來：html{font-size:667/375}*100+"px",body寬3.75*(667/375)*100=667px,又鋪滿了吧；

實力總結

目前移動端ui的設計稿都是按375的iphone6來設計的，大多是2倍圖，是為了展現更細節的東西，就是750px寬的psd圖，在前端設計適配方案的時候就可以用375對應100px的方式來做，所有尺寸css寫psd上的一半就好；

rem的適配方案確定按以下幾個步驟實施：
1.確定設計稿尺寸，375倍數還是320倍數；
2.在公共js中添加方法:

var doc=document.docementElement;//減少dom操作
resize(){
    //獲取dom文檔寬
    var clientWidth=doc.clientWidth,
        htmlFontSize=doc.style.fontSize;
        //動態改變html的font-size,以320為例
        if(clientWidth<320){//設置邊界值以防萬一
            htmlFontSize=‘100px’;
        }else(){
            htmlFontSize=clientWidth/320*100+"px";
        }
}
//檢測屏幕尺寸變化同步font-size，如橫豎屏切換時觸發
window.onresize=function(){
    resize()
}；
//頁面初始化時觸發
resize()

3.css中所有的樣式單位為rem，包括文字的大小，換算關系如下：
如：設計稿尺寸為640，font-size為20px，那么所有尺寸除以2，
{width:3.2rem;font-size:0.1rem;}
如：設計稿尺寸為320，font-size為20px，那么body{width:3.2rem;font-size:0.2rem;}
如：設計搞為375,那么resize()方法中的320要換成375,css寫成body{width:3.75rem;font-size:0.2rem}

特別提醒：這樣的適配在pad橫屏展示超級大，所以還是要根據業務需求設置臨界值；
移動端圖片適配除了rem的尺寸還要根據不同尺寸設備更換2倍圖和3倍圖，比如pad上展示3倍圖就會更清晰，一般方案是用media媒體查詢更換背景圖；

rem的缺陷
最近在做開發的時候遇到rem的一個大坑，就是如果用戶改變了手機的字體大小，而且我們的頁面樣式的寬用了rem,比如{width:1rem},那么頁面的寬就會成倍增長，導致頁面亂掉。。。還沒找到辦法解決，寬度還是先避免使用rem的好。

GPU云服務器云服務器移動端適配方案移動端適配 kettle之數據同步方案移動端適配 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52236.html

前端移動端適配方案之rem之小白解惑

移動端適配-rem: 認識移動端做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下；網上找不到主流android設備的數據表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；豎屏...

W_BinaryTree 2019-08-22 16:33 評論0 收藏0
前端移動端適配方案之rem之小白解惑

移動端適配-rem: 認識移動端做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下；網上找不到主流android設備的數據表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；豎屏...

EasonTyler 2019-08-29 15:07 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0