最全的CSS尺寸單位介紹

前端技術(shù)分享 2019-03-27

展開全文

前端開發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)css中常見的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹
在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及介紹

基本概念

（以下概念讀起來(lái)可能有些晦澀，如果看不懂也沒關(guān)系）

像素

它不是自然界的物理長(zhǎng)度，指基本原色素及其灰度的基本編碼。

css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)中，我們無(wú)需對(duì)這個(gè)津津計(jì)較，但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。
在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。
后來(lái)隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。

物理像素

它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，物理像素指的是顯示器上最小的點(diǎn)。物理像素的大小取決于屏幕。是一個(gè)無(wú)法改變的屬性。

設(shè)備獨(dú)立像素

我上一張圖，你就會(huì)理解什么是設(shè)備獨(dú)立像素

就是我們開發(fā)過(guò)程中使用的css中的px

設(shè)備像素比（device pixel radio）

設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素，單位是dpr！（device pixel radio）

Retina屏幕

所謂“Retina”是一種顯示標(biāo)準(zhǔn)，是把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。也被稱為視網(wǎng)膜顯示屏 ——百度百科

因?yàn)镽etina屏幕的出現(xiàn)，在pc端默認(rèn)情況下，css中的1px等于1物理像素，但在移動(dòng)端1px不一定等于1物理像素，比如說(shuō)iPhone的設(shè)備獨(dú)立像素是375 *667，因?yàn)樗褂昧薘etina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 *1334

在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1px所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。

在普通屏幕下，1px 對(duì)應(yīng) 1個(gè)物理像素(1:1)。在Retina屏幕下（dpr=2），1px對(duì)應(yīng) 2x2個(gè)物理像素(1:4)。

你會(huì)發(fā)現(xiàn)，在移動(dòng)端開發(fā)中使用了圖片（img標(biāo)簽），2倍圖要比1倍圖清晰，就是這個(gè)緣故

px

默認(rèn)情況下像素px是相對(duì)于屏幕分辨率而言，比如說(shuō)我們的屏幕分辨率是1440 X 900，說(shuō)的就是像素1440px X 900px；

這里會(huì)遇到另一種情況

瀏覽器縮放

縮放是縮放CSS像素(縮放比例為1時(shí),一個(gè)CSS像素等于一個(gè)屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對(duì)瀏覽進(jìn)行了縮放

強(qiáng)調(diào)一點(diǎn)，用戶的縮放行為是對(duì)瀏覽器進(jìn)行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎么縮放當(dāng)前頁(yè)面，屏幕分辨率都不會(huì)改變

我們知道在移動(dòng)端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放

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

content屬性值 :

width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
height:可視區(qū)域的高度，值可為數(shù)字或關(guān)鍵詞device-height
intial-scale:頁(yè)面首次被顯示是可視區(qū)域的縮放級(jí)別，取值1.0則頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級(jí)別，
maximum-scale用戶可將頁(yè)面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。
user-scalable:是否可對(duì)頁(yè)面進(jìn)行縮放，no 禁止縮放

但是在pc端就麻煩了
windows：

ctrl + +/-
ctrl + 滾輪
瀏覽器菜單欄

mac：

cammond + +/-
瀏覽器菜單欄

由于瀏覽器菜單欄屬于系統(tǒng)軟件權(quán)限，沒發(fā)控制，我們可以通過(guò)js控制ctrl/cammond + +/- 或 Windows下ctrl + 滾輪縮放頁(yè)面的情況

em

本人在實(shí)際開發(fā)過(guò)程中并沒有使用過(guò)em單位，但是后面要說(shuō)的rem是基于em的，所以，對(duì)em進(jìn)行簡(jiǎn)單介紹

em 是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

em的值并不是固定的；
em會(huì)繼承父級(jí)元素的字體大?。?/p>
任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。body選擇器中聲明Font-size=62.5%<==>1em=10px。

看個(gè)栗子吧

<body>
  <style>
    html {
      font-size: 50px;
    }

    .my-div {
      width: 100%;
      height: 500px;
      margin-top: 50px;
      background-color: gray;
      font-size: 40px;
    }

    .my-div .parent-font {
      font-size: 30px;
    }

    .my-div .parent-font .child-font {
      font-size: 0.5em;
    }
  </style>
  <div class="my-div">
    <p class="parent-font">
      我是父級(jí)文字
      <span class="child-font">我是子級(jí)文字</span>
    </p>
  </div>
</body>

html代碼中，

第一級(jí)，html的 font-size: 50px;

第二級(jí)，my-div 的 font-size: 40px;

第三級(jí)，parent-font 的 font-size:30px;

第四級(jí)，child-font 的 font-size: 0.5em;

我們通過(guò)瀏覽器查看，發(fā)現(xiàn)第四級(jí)的fong-size為15px；

我們?nèi)∠谌?jí)parent-font 的字體大小

我們通過(guò)瀏覽器查看，發(fā)現(xiàn)第四級(jí)的fong-size為20px；

當(dāng)我們?nèi)∠谌?jí)font-size后，第三級(jí)的字體大小為40px；

所以我們說(shuō)em的字體大小不是固定的，em的大小取決于父級(jí)的字體大小

當(dāng)父級(jí)的字體大小為20px，子級(jí)的1em就是20px

當(dāng)父級(jí)的字體大小為30px，子級(jí)的1em就是30px

那么說(shuō)font-size存在著繼承父級(jí)的特點(diǎn)

我們?cè)诘谝患?jí)html中設(shè)置font-size，第二級(jí)繼承第一級(jí)，第三級(jí)繼承第二級(jí)，第四級(jí)繼承第三級(jí)，以此類推

每一級(jí)都繼承自它的父級(jí)，也就是說(shuō)每一級(jí)的em所代表的px大小都不是固定的，因?yàn)樗麄兊母讣?jí)不是同一個(gè)，所以em的應(yīng)用場(chǎng)景并不多。

那么如果是em的都繼承自同一個(gè)地方，是不是可以解決很多問(wèn)題呢？

這時(shí)候rem出現(xiàn)了

rem

rem 是CSS3的一個(gè)相對(duì)單位（root em，根em）

使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素

只要html的font-size大小不變，1rem所代表的font-size大小就不會(huì)變，rem只取決于html的font-size

rem解決了哪些問(wèn)題

移動(dòng)設(shè)備的寬度是各種各樣的，每個(gè)設(shè)備的dpr也不同，換句話說(shuō)就是不同設(shè)備每一行的物理像素?cái)?shù)不同，能顯示的css的px數(shù)也不同，

如果我們寫一個(gè)div，寬度是375px，375px在這個(gè)屏幕（iPhone6）上是剛剛滿屏，因?yàn)檫@個(gè)屏幕寬度剛剛是375px( 設(shè)備獨(dú)立像素)，

當(dāng)我們換另一個(gè)寬度是414px的設(shè)備（iPhone6Plus）時(shí)，這個(gè)寬度375px的div就無(wú)法鋪滿這個(gè)屏幕，同樣的當(dāng)換一個(gè)iPhone5（320px），又會(huì)出現(xiàn)滾動(dòng)條，安卓機(jī)的寬度更是五花八門，使用media媒體查詢不靠譜，因?yàn)樗荒芨采w所有的機(jī)型寬度

我們之前說(shuō)rem的大小是相對(duì)于html的font-size的，如果html的font-size根據(jù)不同設(shè)備的寬度做動(dòng)態(tài)計(jì)算，問(wèn)題就會(huì)得到解決

我們寫頁(yè)面都是根據(jù)UI設(shè)計(jì)稿來(lái)做的，我們假設(shè)UI設(shè)計(jì)稿的寬度是750px（750px是常規(guī)寬度，當(dāng)然也可以是640px或是其他寬度，但是整個(gè)項(xiàng)目，寬度必須統(tǒng)一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）只取決于設(shè)備寬度

于是

document.documentElement.style.fontSize = 100 * ( document.documentElement.clientWidth / 750) + 'px'

html的font-size：document.documentElement.style.fontSize

設(shè)備的寬度：document.documentElement.clientWidth

750：UI設(shè)計(jì)稿的寬度

為了方便計(jì)算我們將font-size x 100，方便計(jì)算（乘100不是必須的，我接觸過(guò)一些項(xiàng)目就不是乘以100，但是UI設(shè)計(jì)稿中使用了sketch做了動(dòng)態(tài)計(jì)算，但我還是建議乘100，不然遇到psd的設(shè)計(jì)圖就很麻煩了）

對(duì)上面的js做些完善

const fontFun = function () {
  let docEl = document.documentElement
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  const recalc = function () {
    let clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
  }
  if (!document.addEventListener) return
  window.addEventListener(resizeEvt, recalc, false)
  window.addEventListener('pageshow', recalc, false)
  document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
  fontFun
}

對(duì)以上代碼不做過(guò)多解釋

也可以這樣寫

(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
    }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  win.addEventListener('pageshow', recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px

iPhone6(375px)下html的font-size:50px,1rem=50px

iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px

rem是繼承自html的font-size，但是小程序中沒有html，那怎么辦呢？

rpx

我不基于html的font-size了，我基于一個(gè)別的值就行了，你也不需要計(jì)算這個(gè)值，我給你計(jì)算了，這就是rpx。
最終的效果就是，你開發(fā)時(shí)在iphon6的設(shè)計(jì)稿上量了多少px，就寫多少rpx就行了，完美適配，perfect！

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：前端技術(shù)分享 > 《前端技術(shù)分享》

舉報(bào)/認(rèn)領(lǐng)