前端學習之路之自適應設計(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為根字型大小
}
複製程式碼

願你成為終身學習者