rem自適應布局移動端自適應必備

由於移動端特殊性，本文講的是如何使用rem

實現自適應

，或叫rem

響應式布局，通過使用乙個指令碼就可以rem自適應

rem是相對於根元素>，這樣就意味著，我們只需要在根元素確定乙個px字型大小，則可以來算出元素的寬高。1rem=16px(瀏覽器html的畫素，可以設定這個基準值），假如瀏覽器的html設為64px，則下面的元素則1rem=64px來運算。

阿里團隊開源的乙個庫。使用flexible.js輕鬆搞定各種不同的移動端裝置相容自適應問題。

從上面的**，主要是改變了dpx和document的font-size大小。大小為docel.getboundingclientrect().width / 10 + 'px';

假設我們的設計稿寬是640的，則html的字型大小則被設為64px.則相當於1rem=64px。

假如乙個元素的寬是160px,在平時，我們可以採用百分比可以做到自適應，假如使用響應式的話，可能需要設定多個，比如在320px，輸出80px，而在640px輸出160px等。

裝置寬度

320px

360px

414px

640px

html字型大小

32px

36px

41.4px

64px

實際輸出

1rem

設計稿縮放大小

80px

90px

103.5px

160px

實際輸出

2.5rem

以上的2.5rem是怎麼得出的呢？

160/64（1rem的基數為64px）=2.5rem;按照官方的說法（750px舉例）

flexible會將視覺稿分成100份（主要為了以後能更好的相容vh和vw），而每乙份被稱為乙個單位a。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出：

1a   = 7.5px
1rem = 75px

那麼我們這個示例的稿子就分成了10a，也就是整個寬度為10rem，對應的font-size為75px：

這樣一來，對於視覺稿上的元素尺寸換算，只需要原始的px值除以rem基準值即可。例如此例視覺稿中的，其尺寸是176px * 176px,轉換成為2.346667rem * 2.346667rem。

另外大漠還寫了一篇詳細的文章：使用flexible實現手淘h5頁面的終端適配裡面介紹了乙個如何快速轉換rem為px的幾種方法，感興趣的童鞋可以去看看。

也可以看這篇文章：sass函式功能——rem轉px

另外在使用這個來處理自適應的另乙個坑就是css sprite，作者的建議是使用svg，或者icon font.或者base64等其他方案。

另外就是在dpr=2時，小可能會出現模糊，建議以最大的來切圖。

在作者的觀點中，是建議描述性的字型使用px，如果有slogan之類大於48px的，可以使用rem，由於使用rem在iphone5和iphone6中字型不同，可能出現13px和15px,點陣字型。

顯然，我們在iphone3g和iphone4的retina屏下面，希望看到的文字字型大小是相同的。也就是說，我們不希望文字在retina螢幕下變小，另外，我們希望在大屏手機上看到更多文字，以及，現在絕大多數的字型檔案都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在製作h5的頁面中，rem並不適合用到段落文字上。所以在flexible整個適配方案中，考慮文字還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文字字型大小大小。
div 
[data-dpr="2"] div 
[data-dpr="3"] div
為了能更好的利於開發，在實際開發中，我們可以定製乙個font-dpr()這樣的sass混合巨集：
//code from@mixin font-dpr($font-size)
[data-dpr="3"] & 
}
有了這樣的混合巨集之後，在開發中可以直接這樣使用：
@include font-dpr(16px);
當然這只是針對於描述性的文字，比如說段落文字。但有的時候文字的字型大小也需要分場景的，比如在專案中有乙個slogan,業務方希望這個slogan能根據不同的終端適配。針對這樣的場景，完全可以使用rem給slogan做計量單位。

rem自適應布局移動端自適應必備

移動端自適應rem布局

移動端自適應方案 rem布局

Rem 自適應布局

rem自適應布局 移動端自適應必備

移動端自適應rem布局

移動端自適應方案 rem布局

Rem 自適應布局

相關推薦

rem自適應布局移動端自適應必備