移動端佈局終極解決方案 ---- hotcss

距離上一次發文貌似有段時間了，多是最近項目太忙，也多是變懶了。。總之無論什麼緣由，開始咱們今天的主題：移動端終極解決方案---hotcss(https://github.com/imochen/hotcss)!

介紹

hotcss不是一個庫，也不是一個框架。它是一個移動端佈局開發解決方案。使用hotcss可讓移動端佈局開發更容易。

使用動態的HTML根字體大小和動態的viewport scale。

遵循視覺一致性原則。在不一樣大小的屏幕和不一樣的設備像素密度下，讓你的頁面看起來是同樣的。

優點

保證不一樣設備下的統一視覺體驗。

不須要你再手動設置viewport,根據當前環境計算出最適合的viewport。

支持任意尺寸的設計圖，不侷限於特定尺寸的設計圖。

支持單一項目，多種設計圖尺寸，專爲解決大型，長週期項目。

提供px2rem轉換方法，CSS佈局，零成本轉換，原始值不丟失。

有效解決移動端真實1像素問題。

用法

在head標籤中引入hotcss.js文件，注意hotcss.js文件必須放在css文件以後引入。

hotcss默認以640px的設計稿來計算html根字體大小，經過如下代碼計算出在320px的屏幕下，html根元素字體大小的值：

在320px的屏幕下html根元素的字體大小爲20px，咱們從設計稿中測量出來的尺寸都要除以20來轉換成rem值。

但若是ui設計師給咱們的設計稿尺寸是750px的時候該怎麼辦呢？咱們先來計算一下在375px的屏幕下hotcss會將html根元素字體大小設置成多少。

根據源碼中的計算公式 innerWidth*20/320求375*20/320 = 23.4375。也就是說在375px的屏幕下html根元素字體爲23.4375px，咱們在編碼的時候要將全部的尺寸除以23.4375來轉換成rem。

除以23.4375.。。。真是一個好蠢的作法，不要慌，我們稍微更改一下源碼就ok了。

將以前的除數320改爲375，那麼html根元素的字體大小就成了20px，咱們在編碼中只須要將設計稿中的尺寸除以20就能輕輕鬆鬆轉換成對應的rem值了。

等一下！！！用心的同窗確定注意到了這樣一件事，375px的屏幕設備像素比dpr是2，也就是說設計稿上的1像素（邏輯像素）等於2物理像素（設備像素），咱們750px設計稿上的尺寸得先除以2換算成設備像素，再去除以html根元素的值轉換成相應的rem。

沒錯，若是是以前的一些rem適配方案，你確實須要這麼作，但上文咱們介紹hotcss優點的時候就有提到過hotcss不須要咱們再手動的設置viewport，它會自動對viewport進行縮放。例如在375px的屏幕裏，hotcss會自動將viewport的initial-scale設置爲0.5，動態縮小了一半，就至關於以前咱們作rem適配方案時的除以2啦，怎麼樣，是否是很棒？

可是，在實際開發中仍是遇到了一個問題，那就是咱們項目中使用的一些ui框架他的css樣式尺寸是按設備像素來編碼的，hotcss對viewport進行縮放以後ui框架中使用到的一些樣式也會進行對應的縮放，這真是一個使人頭疼的事情。

解決的辦法有兩種：一是手動將ui框架中使用的像素轉換成對應的rem，二是禁用viewport縮放，解除對ui框架樣式的影響。

我在項目中使用的是第二種解決方案，禁用viewport縮放，hotcss的文檔裏提供瞭解決方案，以下：

固然，禁止viewport縮放也會帶來一些影響，hotcss文檔中也提到了這一點。但我的以爲利大於弊。禁止viewport縮放以後，咱們就要考慮設備像素比dpr了，就像上文提到的，若ui工程師提供的是750px的設計稿，咱們在編碼css像素的時候就應當先除以2再除以20，也就是除以40來換算出對應的rem值。