px、em 、rem的特點及區別

阿新 • • 發佈：2020-11-23

px （畫素 Pixel ）

物理畫素：螢幕上的真實可顯示的畫素點(每一個點可單獨顯示各種顏色，不可在分割)

邏輯畫素：2px ==2邏輯畫素長度，相當於對物理畫素點做了一個抽離、壓縮

裝置畫素比：物理畫素/邏輯畫素

----------------------------------------分隔線------------------------------------------------------------------

瀏覽器根元素/html的font-size 預設是 16px

px 相對邏輯畫素長度，寫完了就會固定

由於相對於邏輯解析度 那邏輯解析度變化就會引起差錯

em 相對當前dom物件的font-size屬性，如無則尋找最近的有font-size的父元素

依賴當前dom元素或父元素的font-size 一旦需要調整，找父元素的font-size很麻煩

rem 相對於根html（html檔案最外層的html標籤）元素的font-size屬性

需考慮整體

----------------------------------------分隔線------------------------------------------------------------------

程式碼測試

  html {
    font-size: 10px;
  }
  #t1 {
    width: 90px;
    height: 50px;
    background-color: crimson; }
  #t2 {
    font-size: 5px;
    width: 10em;
    height: 10em;
    background-color: darkred;
    margin-left: 2em;}
  #t3 {
    font-size: 50px;
    padding-top: 2rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid black;
  }
  #t4 {
    width: 100%;
    height: 100%;
    background-color: darkblue;}
</style>
<body>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3">
    <div id="t4"></div>
  </div>

px、em 、rem的特點及區別

px （畫素 Pixel ）物理畫素：螢幕上的真實可顯示的畫素點(每一個點可單獨顯示各種顏色，不可在分割)

px、em、rem、rpx 區別及應用場景

px 畫素畫素px是相對於顯示器螢幕解析度而言的em 子元素字型大小的em是相對於父元素字型大小。

3、px，em，rem 的區別？

1）px 畫素（Pixel）絕對單位。畫素 px 是相對於顯示器螢幕解析度而言的，是一個虛擬長度單位，是計算機系統的數字化影象長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。

前端面試題2------px、em、rem、%的區別

技術標籤：前端面試題css 2.px、em、rem、%的區別 1.px px單位名稱為畫素，畫素是固定大小的單元,用於螢幕媒體(即在電腦螢幕上讀取)。一個畫素等於電腦螢幕上的一個點 (是你螢幕解析度的最小分割)。許多網頁設計

CSS3 px、em、rem 的使用與區別

技術標籤：Htmlcss3pxemrem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

px、em、rem的區別

在css中單位長度用的最多的是px、em、rem，這三個的區別是：一、px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。

px、rpx、em、rem 、vw/vh、百分比的區別？

px 絕對長度單位，根據維基百科解釋：它是影象顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。很多時候，px 也常被稱為 CSS 畫素，在 PC 中，通常認為 1px 的真實長度是固

vw 前端_px、em、rem、vw、百分比的區別「前端劍指offer」

技術標籤：vw 前端總結 px是固定單位，其他幾種都是相對單位。當我們把電腦螢幕的解析度調為1440*900時，css裡設定的1px實際的物理尺寸就是螢幕寬度的1/1440。em：預設字型大小的倍數。比如給元素設定font-siz

CSS畫素（px）、物理畫素（pt）、rem、em、rpx

轉https://blog.csdn.net/u014465934/article/details/97040694 1.px畫素（CSS畫素） px是相對長度。

【轉】CSS中px、em、rem、%、vw、vh單位

px、em、rem、%、vw、vh單位 1 、px px就是pixel（畫素）的縮寫。但是在裝置本身上，PX 單元是固定的，不會根據任何其他元素進行更改。對於響應式站點，使用 PX 可能會出現問題，但它們對於保持某些元素的大小一致很

cookies、sessionStorage和localStorage解釋及區別

HTML4本地儲存: 一.cookies: cookie和session都是用來跟蹤瀏覽器使用者身份的會話方式。

MySQL索引結構B樹、B+樹的原理及區別整理

索引是一種資料儲存結構，對錶中一列或多列進行排序以快速定位獲取資料。就像一本書的目錄就是一個索引，如果想在一本書中找到某個主題，一般會先找到對應頁碼。在mysql中，儲存引擎用類似的方法使用索引，先在索引

Python 、Pycharm、Anaconda三者的區別與聯絡、安裝過程及注意事項

1、致歡迎詞我將詳細講述在學Python初期的各種手忙腳亂的問題的解決，通過這些步驟的操作，讓你的注意力集中在Python的語法上以及後面利用Python所解決的專案問題上。而我自己作為小白，很不幸的沒有錯過任何的坑，

JS資料型別（基本資料型別、引用資料型別）及堆和棧的區別分析

本文例項講述了JS資料型別（基本資料型別、引用資料型別）及堆和棧的區別。分享給大家供大家參考，具體如下：

python中 _、、xx__() 區別及使用場景

1、訪問許可權（private、public）與繼承方式(只有public繼承) 　　在面向物件程式語言中，類的屬性與方法都會設定訪問控制許可權，從而滿足我們的設計需求。一般而言，我們通常會將物件的屬性設定為私有的（privat

python中 _、、xx__()區別及使用場景

理論 Python中不存在真正的私有方法。為了實現類似於c++中私有方法，可以在類的方法或屬性前加一個“_”單下劃線，意味著該方法或屬性不應該去呼叫，它並不屬於API。但是，這只是一個形式上的約定，python並不阻止呼

Vue中watch、computed、updated三者的區別及用法

1、watch 理解：監聽器,監聽某個資料的變化從而來執行一些操作，當data裡面的資料發生變化的時候來執行一下開銷較大或非同步的操作

@DateTimeFormat、@JsonFormat、@JSONField區別及用法

@DateTimeFormat、@JsonFormat、@JSONField 推薦寫法： @JSONField(format = \"yyyy-MM-dd HH:mm:ss\")

call、apply和bind的用法及區別

一、call和apply 1、call和apply都是function.prototype的方法，每一個方法的物件例項 new function（）都會有這兩個屬性；

《物理畫素、CSS畫素、多倍圖、rem、rpx、em》

背景：在css中一般使用px作為單位，在pc瀏覽器中的1個CSS畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們以為CSS畫素就是裝置的物理畫素，但實際情況卻並非如此！！！