前端學習之路之自適應設計(sass語法)

基本概念

• css像素、設備像素、邏輯像素、設備像素比

• viewport

• rem

1. css像素、設備像素、邏輯像素、設備像素比

你們能夠先看這篇文章瞭解一下基本概念。

css像素：咱們你們常常寫高多少px，寬多少px,這個就是px像素。

邏輯像素：其它就是css像素，他們實際上是同一回事。

設備像素比：css像素與物理像素的一個比值。

設備像素：手機上像素的點，一般一個像素點就是一點，但從蘋果出了Retina屏 幕後，若是像素比爲2,表明一個邏輯像素表示2個物理像素，如上圖，就是說通常咱們寫高等於2px，寬等於2px，正常對應就是正面的面積爲4的4個像素，這是你們所能正常理解的，可是在Retina屏的時候，若是像素爲2，它是1比2，就是說css 1px等於 Retina 2px ,因此原來用2 x 2表示4個px,如今在Retina須要16個像素來表示。

2. viewport

如上圖,viewport相信你們都 會，但對於width=device-width,爲何 要這樣設置以及設置的原理，我想你們可能不太明白。

1）viewport主要分爲三類 visual viewport，layout viewport, ideal viewport

layout viewport:如上圖藍色的頁面，你能夠認爲你寫的頁面,它就是一個layout viewport。

visual viewport:如上圖手機裏， 如裏說沒有width=device-width的話，你這個很龐大的頁面，在手機 有限的窗口範圍內，是否是放不下。若是說手機是透明的話，你怎麼拖後面的大圖，在手機上只能看到一個相對大小 的頁面，至關於大圖進行裁剪同樣，唄裁剪出來的這塊東西就叫visual viewport.

ideal viewport:簡單說就是手機 的寬和高組成的組成這種尺寸就叫ideal viewport。

2）width=device-width主要作了什麼事情？

width=device-width它主要的做用就是讓大圖layout viewport等於手機的ideal viewport。這樣就作到了2個不一樣的窗口大小 是同樣的

3. rem

上圖是官方說明，簡單的說，rem的計算就是按照html的根標籤進行計算。

工做原理

• 利用viewport和設備像素比調整基準像素
• 利用px2rem自動轉換css單位

1）利用viewport和設備像素比調整基準像素

上圖中的設計尺寸，好比5s,它的像素是320，像素比drp爲2，這個320指的是剛纔的css像素，因此物理像素等於320 x 2 = 640,也就是說手機的硬件提供640個真實的像素點，這裏所說的是寬，不要考慮高。舉個粟子，如右圖設備尺寸，好比說當你的設備寬是375 css像素，設備像素比爲3，因此物理像素爲375 x 3 =1125 個物理像素。而後經過數學的線性比咱們就能夠根據比例來作自適應，但這處方法在真實世界是不科學的，由於手機尺寸不少，不可能像這樣一個一個調整，因此這種方法不適用。

想一想剛纔的說的rem，咱們經過設備像素比和viewport調整基準像素， 咱們不須要因此的設備都 要去除以一下設備像素比的關係，咱們是利用js本身計算，算法就是利用上圖的1125/640這個線性比。

好比說設計尺寸下當前html字體大小 爲40px,以它爲基準單位，那麼到設備尺寸下，html的字體大小爲( 40 x 1125 )/ 640=71.1,而後全部的單位爲rem，這樣就能夠達到自適應。

2. 利用px2rem自動轉換css單位

@function torem($px){//$px爲須要轉換的字號
    @return $px / 40px * 1rem; //40px爲根字體大小
}
複製代碼