前言

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

長(zhǎng)度單位

在前端布局時(shí)，我們將長(zhǎng)度單位分為兩種，一種是絕對(duì)單位，一種是相對(duì)單位。

1、絕對(duì)單位：m/dm/cm/mm/inch

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

2、相對(duì)單位：px

沒(méi)錯(cuò)，你沒(méi)有看錯(cuò)，px是一個(gè)相對(duì)單位，px是Pixel的縮寫(xiě),代表的是圖像上最小的一個(gè)點(diǎn)的大小，他會(huì)因?yàn)閳D像大小的不同而改變，比如1024x1024的一張圖，當(dāng)他的長(zhǎng)寬擴(kuò)大一倍，而分辨率不變（即1024x1024），那么他的每個(gè)像素的大小都將擴(kuò)大一倍

手機(jī)屏幕的尺寸

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

一些名詞的解釋

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

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

dpr:設(shè)備像素比，device pixel ratio

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

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

·viewport:視窗/視口,你的瀏覽器能夠用來(lái)顯示頁(yè)面的尺寸大小概念首先提出的就是蘋(píng)果公司，應(yīng)用在Safari瀏覽器，解決在移動(dòng)端顯示pc頁(yè)面的問(wèn)題大部分移動(dòng)端默認(rèn)的視窗是980px，也有1024px

利用meta標(biāo)簽對(duì)viewport進(jìn)行控制

我們?cè)陂_(kāi)發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見(jiàn)的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：↓↓↓

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

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放
（ps：移動(dòng)端下定寬寫(xiě)法：viewport width=定值（設(shè)計(jì)稿寬），我們不設(shè)置縮放相關(guān)屬性，移動(dòng)端瀏覽器會(huì)自動(dòng)縮放頁(yè)面以適配屏幕）

rem和em

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