前言

這是一些不太惹人注意的知識，但是掌握了他會對你的前端不具有很大幫助。

長度單位

在前端布局時，我們將長度單位分為兩種，一種是絕對單位，一種是相對單位。

1、絕對單位：m/dm/cm/mm/inch

上述這些就是絕對單位，這些單位在現(xiàn)實中有絕對定義，不會隨著你的布局平臺大小比例變化而變化（ps：1inch = 2.54cm）

2、相對單位：px

沒錯，你沒有看錯，px是一個相對單位，px是Pixel的縮寫,代表的是圖像上最小的一個點的大小，他會因為圖像大小的不同而改變，比如1024x1024的一張圖，當他的長寬擴大一倍，而分辨率不變（即1024x1024），那么他的每個像素的大小都將擴大一倍

手機屏幕的尺寸

通常我們所指的4.5寸、5,0寸這些手機屏幕的大小指的是手機屏幕對角線的距離（只包括可顯示部分，邊框部分不包括）

一些名詞的解釋

ppi:px per inch:每英寸現(xiàn)實的像素

dpi:dots per inch:每英寸中點的數(shù)量

dpr:設備像素比，device pixel ratio

css像素：又稱邏輯像素，就是在寫CSS樣式使用的像素

物理像素：又稱設備像素，表示屏幕硬件本身能夠顯示的色彩的最小單位，如2k就是將css像素用2*2的點顯示

·viewport:視窗/視口,你的瀏覽器能夠用來顯示頁面的尺寸大小概念首先提出的就是蘋果公司，應用在Safari瀏覽器，解決在移動端顯示pc頁面的問題大部分移動端默認的視窗是980px，也有1024px

利用meta標簽對viewport進行控制

我們在開發(fā)移動設備的網(wǎng)站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：↓↓↓

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放
（ps：移動端下定寬寫法：viewport width=定值（設計稿寬），我們不設置縮放相關屬性，移動端瀏覽器會自動縮放頁面以適配屏幕）

rem和em

rem 和 em 單位是由瀏覽器基于你的設計中的字體大小計算得到的像素值。em 單位基于使用他們的元素的字體大小。rem 單位基于 html 元素的字體大小。em 單位可能受任何繼承的父元素字體大小影響。rem 單位可以從瀏覽器字體設置中繼承字體大小。
（ps：一般情況下，不要給字體大小用rem）