vue中的自適應布局（ px與視口）

1. px與視口

2. %

3. **查詢

4. rem

5. vm/vh

在靜態頁面中，通常使用px(畫素)作為盒子容器寬高的單位，在pc端，通常認為css中,1px所表示的真實長度是固定的。

那麼，px真的是乙個裝置無關，跟長度單位公尺和分公尺一樣是固定大小的嗎？

答案是否定的，pc端下和移動端下我們設定的font-size統一為16px。

可以看出，字型都是16px，顯然在pc端中文字正常顯示，而在移動端文字很小，幾乎看不到，說明在css中1px並不是固定大小，直觀從我們發現在移動端1px所表示的長度較小，所以導致文字顯示不清楚。

那麼css中的1px的真實長度到底由什麼決定呢？

為了理清楚這個概念我們首先介紹畫素和視口的概念。

1.畫素

畫素是網頁布局的基礎，乙個畫素表示了計算機螢幕所能顯示的最小區域，畫素分為兩種型別：css畫素和物理畫素。

我們在js或者css**中使用的px單位就是指的是css畫素，物理畫素也稱裝置畫素，只與裝置或者說硬體有關，同樣尺寸的螢幕，裝置的密度越高，物理畫素也就越多。下表表示css畫素和物理畫素的具體區別：

css畫素: 為web開發者提供，在css中使用的乙個抽象單位

物理畫素: 只與裝置的硬體密度有關，任何裝置的物理畫素都是固定的

2.視口

廣義的視口，是指瀏覽器顯示內容的螢幕區域，狹義的視口包括了布局視口、視覺視口和理想視口

(1) 布局視口（layout viewport）

布局視口定義了pc網頁在移動端的預設布局行為，因為通常pc的解析度較大，布局視口預設為980px。

也就是說在不設定網頁的viewport的情況下，pc端的網頁缺省會以布局視口為基準，在移動端進行展示。因此我們可以明顯看出來，預設為布局視口時，根植於pc端的網頁在移動端展示很模糊。

(2) 視覺視口（visual viewport）

視覺視口表示瀏覽器內看到的**的顯示區域，使用者可以通過縮放來檢視網頁的顯示內容，從而改變視覺視口。視覺視口的定義，就像拿著乙個放大鏡分別從不同距離觀察同乙個物體，視覺視口僅僅類似於放大鏡中顯示的內容，因此視覺視口不會影響布局視口的寬度和高度。

(3) 理想視口（ideal viewport）

理想視口或者應該全稱為「理想的布局視口」，在移動裝置中就是指裝置的解析度。

換句話說，理想視口或者說解析度就是給定裝置物理畫素的情況下，最佳的「布局視口」。

上述視口中，最重要的是要明確理想視口的概念，在移動端中，理想視口或者說解析度跟物理畫素之間有什麼關係呢？

為了理清解析度和物理畫素之間的聯絡，我們介紹乙個用dpr（device pixel ratio）裝置畫素比來表示，則可以寫成：

1
dpr= 物理畫素／解析度

在不縮放的情況下，乙個css畫素就對應乙個dpr，也就是說，在不縮放

1
css畫素 = 物理畫素／解析度

此外，在移動端的布局中，我們可以通過viewport元標籤來控制布局，比如一般情況下，我們可以通過下述標籤使得移動端在理想視口下布局：

"viewport" name=
"viewport" content=
"width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"
>

上述meta標籤的每乙個屬性的詳細介紹如下：

其中我們來看width屬性，在移動端布局時，在meta標籤中我們會將width設定稱為device-width，device-width一般是表示解析度的寬，通過width=device-width的設定我們就將布局視口設定成了理想的視口。

3.px與自適應

上述我們了解到了當通過viewport元標籤，設定布局視口為理想視口時，1個css畫素可以表示成：

1
css畫素 = 物理畫素／解析度

我們知道，在pc端的布局視口通常情況下為980px，移動端以iphone6為例，解析度為375 * 667

也就是說布局視口在理想的情況下為375px。比如現在我們有乙個750px * 1134px的視覺稿，那麼在pc端，乙個css畫素可以如下計算：

pc端：

`1 css畫素 = 物理畫素／解析度 = 750 ／ 980 =0.76 px`

而在iphone6下：

iphone6：1
css畫素 = 物理畫素 ／解析度 =
750 ／ 375
=2 px

也就是說在pc端，乙個css畫素可以用0.76個物理畫素來表示，而iphone6中乙個css畫素表示了2個物理畫素。

此外不同的移動裝置解析度不同，也就是1個css畫素可以表示的物理畫素是不同的，因此如果在css中僅僅通過px作為長度和寬度的單位，造成的結果就是無法通過一套樣式，實現各端的自適應