viewport&像素

viewport是什麼

移動端中，分爲兩個視口：

1. layout viewport 佈局視口: 視口的分辨率接近於PC顯示器,也就是html的寬度接近於pc端的寬度。
2. visual viewport 視覺視口: 手機的物理可視窗口,不借助滾動條所看到的內容。

移動設備的viewport默認是layout viewport
能夠這兩理解，有一個圖片(layout viewport)，寬度是：1090 1090，有一個畫框(visual viewport)，寬度是：320 460，用戶經過畫框來看畫。當layout viewport與visual viewport徹底一致時，用戶經過畫框看到的就是整個畫。若是layout viewport較大，用戶須要經過移動畫框來查看畫面內容。

meta中的viewport

viewport是meta中的一個值，經過設置viewport，能夠控制瀏覽器如何規範的渲染Web頁面

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

要把當前的viewport寬度設爲ideal viewport的寬度，既能夠設置 width=device-width，也能夠設置 initial-scale=1，若是initial-scale和viewport有衝突，瀏覽器會取比較大的值。

viewport值:

name	value	Description
width	正整數或device-width	定義視口(layout viewport)的寬度，單位爲像素,
height	正整數或device-height	定義視口的高度，單位爲像素
initial-scale	[0.0-10.0]	定義初始縮放值
minimum-scale	[0.0-10.0]	定義縮小最小比例，它必須小於或等於maximum-scale設置
maximum-scale	[0.0-10.0]	定義放大最大比例，它必須大於或等於minimum-scale設置
user-scalable	yes/no	容許用戶手動縮放頁面，默認是yes

分辨率&像素

以上所說的寬度，實際上是分辨率

什麼是分辨率

1. 像素：每張圖片都是由色點組成的，每一個色點稱爲一個像素。
2. 屏幕分辨率：是指一塊屏幕中畫面水平方向的像素值 * 畫面垂直方向的像素值。
3. 圖像分辨率: 是指每英寸圖像內的像素點數。圖像分辨率是有單位的，叫 像素每英寸。

設備像素：device pixel

屏幕上的像素。是物理像素。 設備像素可能不相同

物理像素不會改變，單位是pt。

1pt = 1/72(inch),inch及英寸，而1英寸等於2.54釐米

舉個🌰 ： iphone5的像素：640*1136px， 表示：屏幕由640行，1136列像素組成。

CSS像素：(css pixel)

CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的像素。

舉個🌰 ：iphone5的像素：320px。

設置：zoom 100%的狀況下,1個CSS像素纔會等於1個設備像素

如何計算css像素

1. 對於低分辨率設備（絕大部分顯示器，手機屏幕），1個css像素至關於最接近參考像素的整數個設備像素。
2. 對於高分辨率設備(打印機)來講，1個css像素就是96分之一英寸。

設備像素比：DPR

DPR = 設備像素/CSS像素。
理解：1px由多少個設備像素組成；
如何獲取：
在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性(有兼容問題)，它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。
CSS像素就能夠看作是設備的獨立像素，因此經過devicePixelRatio，咱們能夠知道該設備上一個css像素表明多少個物理像素。

設備獨立像素：DIP

CSS像素 =設備獨立像素 = 邏輯像素

每英寸像素密度：PPI

一英寸中，像素個數
計算：

var 斜邊尺寸 = V(1920^2+1080^2) V表明開根號 
var ppi = 斜邊尺寸/5.5 
ppi = 401ppi

單位

px

定義：

1. css中的單位，是一個抽象概念(抽象概念必定要清楚上下問)。瀏覽器中都是按照px來設置尺寸。
2. 爲視頻顯示的基本單位(來源：wiki)

ps: px是一個相對單位，相對設備像素的。（css的像素是根據設備的分辨率計算出來的）。如何感覺這個相對值呢？當咱們縮放網頁大小的時候，並無改變css像素，可是頁面中內容變大了，這是由於css像素是相對的，其餘因素的改變，影響了css像素的大小。

計算：
爲了讓相同的1px在不一樣的設備上，視覺上看起來差很少，css像素是根據設備像素大小換算出來的。css中，根據參考像素進行換算

em

計算：使用em單位的元素的字體大小乘以em值，父元素大小會影響em，是由於繼承的緣由,若是出現層級em嵌套，會影響比較大。

rem

計算：取決於頁面根元素大小，根據根元素字體大小乘以rem值。

retina視網屏幕：Retina顯示器指的是在人體正常使用距離下，沒法看到屏幕的像素。

1px問題

爲何會有這種問題？

設計師的px指的是物理像素，咱們設置的是css像素，物理像素和css像素不是徹底一致的。

如何解決

1. 小數

   .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }

   問題：兼容性不是很好

2. tranform加僞類標籤

   <span class="border-1px">1像素邊框問題</span>
   // less
   .border-1px{
   position: relative;
   &::before{
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 200%;
       border:1px solid red;
       color: red;
       height: 200%;
       -webkit-transform-origin: left top;
       transform-origin: left top;
       -webkit-transform: scale(0.5);
       transform: scale(0.5);
       pointer-events: none; /* 防止點擊觸發 */
       box-sizing: border-box;
       @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
       width: 300%;
       height: 300%;
       -webkit-transform: scale(0.33);
       transform: scale(0.33);
       }
   }
   }

   優勢: 其實不止是圓角, 其餘的邊框也能夠這樣作出來
   缺點: 代碼量也很大, 佔據了僞元素, 容易引發衝突

3. 陰影

   .border-1px{
   box-shadow: 0px 0px 1px 0px red inset;
   }