前端開發(fā)常用單位

像素

• 在前端開發(fā)中視口的水平方向和垂直方向是由很多小方格組成的,一個小方格就是一個像素
• 特點: 不會隨著視口大小的變化而變化,像素是一個固定的單位(絕對單位)

百分比

• 百分比是前端開發(fā)中的一個動態(tài)單位,永遠(yuǎn)都是以當(dāng)前元素的父元素作為參考進(jìn)行計算
• 特點
  • 子元素寬度是參考父元素寬度計算的
  • 子元素高度是參考父元素高度計算的
  • 子元素padding和margin無論是垂直方向還是水平方向都是參考父元素的寬度計算的
  • 不能通過百分比設(shè)置元素的border
  • 百分比是一個動態(tài)的單位,會隨著父元素寬高的變化而變化

em

• em是前端開發(fā)中的一個動態(tài)單位,是一個相對于元素字體大小的單位
• 特點
  • 當(dāng)前元素設(shè)置了字體大小,那么就相對于當(dāng)前元素的字體大小
  • 當(dāng)前元素沒有設(shè)置字體大小,那么就相對于第一個設(shè)置字體大小的祖先元素的字體大小
  • 如果當(dāng)前元素和所有祖先元素都沒有設(shè)置大小,那么就相對于瀏覽器默認(rèn)的字體大小
  • em是一個動態(tài)單位,會隨著參考元素字體大小的變化而變化(相對單位)

rem

• rem就是root em,和em一樣是前端開發(fā)中的一個動態(tài)單位
• rem和em的區(qū)別在于,rem是一個相對于根元素(html)字體大小的單位
• 特點
  • 除了根元素以外,其他祖先元素的字體大小不會影響rem尺寸
  • 如果根元素設(shè)置了字體大小,那么就相對于根元素的字體大小
  • 如果根元素沒有設(shè)置字體大小,那么就相對于瀏覽器默認(rèn)的字體大小
  • rem是一個動態(tài)單位,會隨著根元素字體大小的變化而變化(相對單位)

vwh

• vw和vh是前端開發(fā)中的一個動態(tài)單位,是一個相對于網(wǎng)頁視口的單位
• 系統(tǒng)會將視口的寬度和高度分為100份,1vw就占用視口寬度的百分之一,1vh就占用視口高度的百分之一,vw和vh永遠(yuǎn)都是以視口為參考
• 特點: vw/vh是一個動態(tài)單位,會隨著視口大小的變化而變化(相對單位)
• vmin和vmax
  • vmin:vw和vh中較小的那個
  • vmax:vw和vh中較大的那個
  • 使用場景: 保證移動開發(fā)中屏幕旋轉(zhuǎn)之后尺寸不變

移動端視口

• 簡單理解就是可視區(qū)域大小我們稱之為視口

• 在pc端,視口大小就是瀏覽器窗口可視區(qū)域的大小,在移動端,視口大小并不等于窗口大小,移動端視口寬度被人為定義為了980

• 移動端自動將視口寬度設(shè)置為980帶來的問題

  • 雖然移動端自動將視口寬度設(shè)置為980之后讓我們可以很完美的看到整個網(wǎng)頁,但是由于移動端的物理尺寸(設(shè)備寬度)是遠(yuǎn)遠(yuǎn)小于視口寬度的
  • 為了能夠在較小的范圍內(nèi)看到視口中所有的內(nèi)容,那么就必須將內(nèi)容縮小
  • 和前面Canvas時講的viewbox一樣,近大遠(yuǎn)小原理

• 通過meta設(shè)置視口大小

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

  • width=device-width 設(shè)置視口寬度等于設(shè)備的寬度
  • initial-scale=1.0 初始縮放比例,1不縮放
  • maximum-scale:允許用戶縮放到的最大比例
  • minimum-scale:允許用戶縮放到的最小比例
  • user-scalable:用戶是否可以手動縮放

移動端常用適配方案

通過媒體查詢

• 媒體查詢的方式可以說是我們早期采用的布局方式,它主要是通過查詢設(shè)備的寬度來執(zhí)行不同的css代碼,最終達(dá)到界面的配置
• 優(yōu)勢
  • 簡單,哪里不對改哪里
  • 調(diào)整屏幕寬度的時候不用刷新頁面即可響應(yīng)式展示
  • 特別適合對移動端和pc維護同一套代碼的時候
• 劣勢
  • 由于移動端和pc端維護同一套代碼,所以代碼量比較大,維護不方便
  • 為了兼顧大屏幕或高清設(shè)備,會造成其他資源浪費,特別是加載圖片資源
  • 為了兼顧移動端和pc端各自響應(yīng)式的展示效果,難免會損失各自特有的交互方式
• 應(yīng)用場景
  • 對于比較簡單(界面不復(fù)雜)的網(wǎng)頁,如:企業(yè)官網(wǎng),宣傳單頁等,我們可以通過媒體查詢,伸縮布局,bootstrap來實現(xiàn)響應(yīng)式站點
  • 對于比較復(fù)雜(界面復(fù)雜)的網(wǎng)頁,如:電商,團購等,更多的則是采用pc端一套代碼,移動端一套代碼
• 界面自動跳轉(zhuǎn)
  • 默認(rèn)打開PC端界面
  • 在PC端界面中通過BOM拿到當(dāng)前瀏覽器信息
  • 通過正則判斷當(dāng)前瀏覽器是否是移動端瀏覽器
  • 通過BOM的location對象實現(xiàn)跳轉(zhuǎn)到移動端界面

通過媒體查詢+rem

• 雖然我們將移動端獨立到一套代碼中了,但是由于移動端也有很多的屏幕尺寸,所以也需要進(jìn)行適配

• 當(dāng)下在企業(yè)開發(fā)中設(shè)計師提供給我們的移動端設(shè)計圖是750*xxx或者1125*xxx的,所以我們需要對設(shè)計師提供的圖片進(jìn)行等比縮放,這樣才能1:1還原設(shè)計圖片

• 如何等比縮放

  • 將設(shè)計圖片等分為指定分?jǐn)?shù),求出每一份的大小
  • 將目標(biāo)屏幕也等分為指定分?jǐn)?shù),求出每一份的大小
  • 用原始元素尺寸/原始圖片每一份大小*目標(biāo)屏幕每一份大小=等比縮放后的尺寸

• 應(yīng)用計算公式

  • 目標(biāo)屏幕每一份的大小就是html的font-size
  • 使用時只需要用原始元素尺寸/原始圖片每一份大小rem 即可

• JS動態(tài)計算當(dāng)前屏幕每一份的大小

  <script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
  </script>
  

  • 不用寫很多的媒體查詢
  • 切換了屏幕尺寸需要刷新界面才有效

設(shè)備像素和CSS像素

• 設(shè)備像素又稱為物理像素,是"物理屏幕"上真實存在的發(fā)光點,只要屏幕一經(jīng)出廠就固定不會改變
• CSS像素又稱為邏輯像素,是編程世界中虛擬的東西,我們通過代碼設(shè)置的像素都是邏輯像素
• CSS像素和設(shè)備像素在有的時候是不一樣的
  • 在pc端,1個CSS像素往往都是對應(yīng)著電腦屏幕的一個物理像素,所以我們無需關(guān)心pc端的CSS像素和設(shè)備像素
  • 在手機端,最開始1個CSS像素也是對應(yīng)著手機屏幕的1個物理像素,從iPhone4開始,蘋果公司推出了所謂的retina視網(wǎng)膜屏幕
  • 屏幕尺寸沒有變化,但是像素點卻多了一倍
  • 這就導(dǎo)致了在1個CSS像素等于1個物理像素的手機上,我們設(shè)置1個CSS像素只會占用1個物理像素
  • 而在1個CSS像素不等于1個物理像素的手機上,我們設(shè)置1個CSS像素就會占用2個物理像素
  • 所以仔細(xì)觀察會發(fā)現(xiàn)同樣是1像素但是在retina視網(wǎng)膜屏幕的手機上會粗一些

適配方案三

• 如果設(shè)備像素和CSS像素一樣,那么無需處理不會帶來任何負(fù)面影響
• 如果設(shè)備像素是CSS像素的2倍,那么我們只需將CSS像素縮小一半即可,但是有時候設(shè)備像素可能是CSS像素的3倍/4倍...
• 獲取設(shè)備像素比DPR
  • DPR = 設(shè)備像素 / CSS像素
  • 在JS中我們可以通過window.devicePixelRatio 獲取當(dāng)前設(shè)備像素比
  • 通過<meta name="viewport">的initial-scale屬性來縮小
  • 注意點:縮放視口后視口大小會發(fā)生變化