webapp移動端適配方案之“手淘框架flexible”
前言：這篇文章,本來準備在去年年底的時候,分享給大家的。可由於年末工作比較忙的原因,再加上自己的一些情況,就一直拖到現在才開始寫。
好了廢話不多說啦!我們一起來看看,手淘的這個“flexible”庫是怎麼用的。
在學會用之前,我們還是先了解一些東西吧!
一、基本概念
1、視窗viewport
可能寫過移動端的朋友就知道viewport是什麼意思。
如果你不知道的話,可以簡單理解成：瀏覽器的可視區視窗。可能在PC端,viewport就是瀏覽器視窗的寬度高度。但在移動端裝置上卻就有點複雜,具體的詳細介紹我就不介紹啦!可以自行百度...
2、物理畫素
物理畫素又被稱為裝置畫素,他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。正是這些裝置畫素的微小距離欺騙了我們肉眼看到的影象效果。
3、裝置獨立畫素
裝置獨立畫素也稱為密度無關畫素,可以認為是計算機座標系統中的一個點,這個點代表一個可以由程式使用的虛擬畫素(比如說CSS畫素),然後由相關係統轉換為物理畫素。
4、CSS畫素
CSS畫素是一個抽像的單位,主要使用在瀏覽器上,用來精確度量Web頁面上的內容。一般情況之下,CSS畫素稱為與裝置無關的畫素(device-independent pixel),簡稱DIPs。
5、螢幕密度
螢幕密度是指一個裝置表面上存在的畫素數量,它通常以每英寸有多少畫素來計算(PPI)。
6、裝置畫素比
裝置畫素比簡稱為dpr,其定義了物理畫素和裝置獨立畫素的對應關係。它的值可以按下面的公式計算得到:
| 1 |
裝置畫素比 = 物理畫素 / 裝置獨立畫素
|
眾所周知,iPhone6的裝置寬度和高度為375pt * 667pt,可以理解為裝置的獨立畫素;而其dpr為2,根據上面公式,我們可以很輕鬆得知其物理畫素為750pt * 1334pt。
二、如何使用“flexible”
1、首先去除已有的meta標籤
| 1 2 3 |
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0" />
|
然後在引用以下兩個檔案在你的頁面。
| 1 2 3 |
<script type="text/javascript" src="js/lib/flexible.js"></script>
<script type="text/javascript" src="js/lib/flexible_css.js"></script>
|
如果沒有這個兩個檔案的朋友,可以直接點選下載,也可以到github下載。
2、因為flexible會將視覺稿分成100份。按照官方的說法:這樣做(主要為了以後能更好的相容vh和vw)而每一份被稱為一個單位a。同時1rem單位被認定為10a。以750視覺稿(效果圖)為例子舉例:
| 1 2 3 |
1a = 7.5px
1rem = 75px
|
得到這樣的一個換算關係,那跟我們有什麼關係呢?
有了這樣的一個關係，這樣我們就可以直接來使用rem單位來佈局，以此來達到各機型的適配。我想這也是flexible的目的所在!
如果還有朋友不懂如何換算的話,我在舉個例子:以寬640的效果圖為案例!
一張圖片的寬、高都是160px。那麼換算成rem單位就是:2.667rem
| 1 2 3 |
width:200px; ----> width:2.5rem;
height:200px; --->height:2.667rem;
|
可能會有朋友問？那文字也是用“rem”還是“px”作為單位呢？
按照官方的說法：字型大小不推薦使用“rem”來作為單位,而仍舊使用“px”來作為單位。並配合用data-dpr屬性來區分不同dpr下的的大小。
| 1 2 3 4 5 6 7 8 9 10 11 |
#div1{
width:3rem;
height:3rem;
font-size:15px
}
[data-dpr="2"] #div1 {
font-size: 30px;
}
[data-dpr="3"] #div1 {
font-size: 45px;
}
|
可能有人會問“data-dpr”是什麼?以及是如何達到螢幕適配的?
“data-dpr”其實是“flexible”這庫,會自動根據裝置,來新增一個標示。同時也會根據這個標識,來給html加上相對應的font-size的值。
如此一來,頁面中的元素,他們會根據html元素的font-size值做相應的計算,從而實現螢幕的適配效果。
媽媽再也不用擔心,我為了適配各種機型而煩惱啦!哈哈!!就這麼簡單粗暴是不是?
說了這多,還是來個案例看一下吧!以下是我寫的一個實戰案例:
點選觀看, 也可以掃一掃旁邊的二維碼!
好啦,基本佈局沒問題啦,可能有些小夥伴可能還在想:"怎麼快速換算px與rem之間的關係啊"。
難道用計算器?
這樣多浪費開發時間啊？
不過不用擔心,這裡剛好有一個sublime text px轉化rem的外掛,可以滿足你的需求。
使用方式:
1、開啟外掛目錄
進入packages目錄:Sublime Text -> Preferences -> Browse Packages...
2、將下載的外掛，解壓到開啟的外掛目錄。
3、設定配置引數
首先開啟引數配置檔案:
| 1 |
Sublime Text -> Preferences -> Package Settings -> cssrem->Settings-User
|
寫入以下配置引數
| 1 2 3 4 |
{
"px_to_rem":72,//px轉rem單位比例
"max_rem_fraction_length":3//px轉rem的小數部分的最大長度
}
|
配置引數說明:
px_to_rem - px轉rem的單位比例,預設為40。
max_rem_fraction_length - px轉rem的小數部分的最大長度。預設為6。
available_file_types - 啟用此外掛的檔案型別。預設為:[".css", ".less", ".sass"]。
4、重啟Sublime Text。
寫在最後:雖然現在移動端適配方法有很多種,大家採用的方式也各不一樣。各自有各自的優勢與劣勢吧!至於如何選擇取決於你自己。