px、em、pt之間的區別與互相轉換

来源:http://www.cnblogs.com/bigshow1949/archive/2017/06/21/7060941.html
-Advertisement-
Play Games

關於px、pt和em的區別,自己有時候也會糾結到底該用什麼單位,今天特意查了一些文章,下麵這篇雖然很久遠了,但解釋的比較全面,轉載收藏之。點擊查看原文(原網址已失效,這是其他站點) 這裡引用的是Jorux的“95%的中國網站需要重寫CSS”的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺 ...


關於px、pt和em的區別,自己有時候也會糾結到底該用什麼單位,今天特意查了一些文章,下麵這篇雖然很久遠了,但解釋的比較全面,轉載收藏之。點擊查看原文(原網址已失效,這是其他站點)

這裡引用的是Jorux的“95%的中國網站需要重寫CSS”的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字體,所以無法用瀏覽器字體放大的功能,而國外大多數網站都可以在IE下使用。因為:

1. IE無法調整那些使用px作為單位的字體大小;

2. 國外的大部分網站能夠調整的原因在於其使用了em作為字體單位;

3. Firefox能夠調整px和em,但是96%以上的中國網民使用IE瀏覽器(或內核)。

px像素(Pixel)是相對長度單位,像素px是相對於顯示器屏幕解析度而言的。(引自CSS2.0手冊)
em是相對長度單位,相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的預設字體尺寸。(引自CSS2.0手冊)

字體單位使用em能支持IE6下的字體縮放,在頁面中按ctrl+滾輪,字體以px為單位的網站沒有反應。

px是絕對單位,不支持IE的縮放。

em是相對單位,網頁中的文字能放大和縮小。將行距(line-height),和縱向高度的單位都用em。保證縮放時候的整體性。

任意瀏覽器的預設字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有如下特點:

1. em的值並不是固定的;

2. em會繼續父級元素的字體大小。

 

所以我們在寫CSS的時候,需要註意:

1. body選擇器中聲明Font-size=62.5%;(Font-size=63%;用於ie6相容)

2. 將你的原來的px數值除以10,然後換上em作為單位;

3. 重新計算那些被放大的字體的em數值。避免字體大小的重覆聲明。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明瞭字體大小為1.2em,那麼在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼續#content的字體高而變為了1em=12px。

但是12px漢字例外,就是由以上方法得到的12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小,而是稍大一點。這個問題 Jorux已經解決,只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時,對於浮點的取值精確度有限。不知道有沒有其他的解釋。

 

單位pt的說明

在印刷排版中,point是一個絕對值,它等於1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含義卻並非如此。因為我們的顯示器被分割為了一個個的像素,單個像素只能有一種顏色 (為了簡化,這裡暫不討論次像素反鋸齒技術),要在屏幕上顯示,必須先把以 pt 為單位的長度轉換為以像素為單位的長度,這個轉換的媒介,就是 DPI (事實上,這裡的所謂的 DPI,是操作系統和瀏覽器中使用的術語,即為 PPI, pixels per inch,和掃描儀、印表機、數位相機中的 DPI 是不同的概念)。

例如,無論在哪個操作系統中,Firefox 瀏覽器預設的 DPI 都是 96,那麼實際上 9pt = 9 * 1/72 * 96 = 12px。

所以,雖然“DPI”中的“I”和“1pt 等於 1/72 inch”中的“inch”,都不代表物理上的英寸,但這兩個單位互相之間是相等的,也就在相乘中約掉了。

那麼,真實的物理長度怎麼計算呢?請拿出一把尺子,丈量你的顯示器的可見寬度 (我這裡是 11.2992 英寸),除以橫向解析度 (我這裡是 1024 像素),得到的就是每個像素的物理長度。

現在我們可以回答這樣一個問題,網頁上 9pt 的字體究竟占用了多寬的空間?答案是:  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 釐米。

雖然pt是絕對單位,但是那隻是針對輸出設備而言的,在文字排版工具(word,abobe)中是非常有用的字體單位。不管顯示器的解析度是多少,列印在紙面上的結果是一樣的。

但是網頁主要為了屏幕顯示,而不是為了列印等其他需要的。而px能夠精確地表示元素在屏幕中的位置和大小。

當然。在dpi是96的情況下,9pt=12px。

附px、em、%和pt換算表

px、em、%和pt的換算


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 兩者的區別主要集中以下幾個方面: 1.key是否允許為空 HashMap允許key為null,Hashtable不允許key為null。 2.value是否允許為空 HashMap允許value為空,Hashtbale不允許value為null。 3.線程是否安全 HashMap線程不安全,Hash ...
  • 題目描述 Like everyone else, FJ is always thinking up ways to increase his revenue. To this end, he has set up a series of tolls that the cows will pay wh ...
  • 前臺下載 ...
  • 本文轉自:http://blog.csdn.net/sinat_37328421/article/details/69267166 比方說你想配置預設路由為: $route['default_controller'] = 'index/home'; ci3.0之前是可以放在 controllers中 ...
  • 最近使用vue2.0重構項目, 需要實現一個分頁的表格, 沒有找到合適的分頁組件, 就自己寫了一個, 效果如下: 該項目是使用 vue-cli搭建的, 如果你的項目中沒有使用webpack,請根據代碼自己調整: 首先新建pagination.vue文件, 所有組件的代碼都寫在這裡, 寫這樣的組件並沒 ...
  • 1.javascript的typeof返回哪些數據類型 alert(typeof [1, 2]); //object alert(typeof 'leipeng'); //string var i = true; alert(typeof i); //boolean alert(typeof 1); ...
  • 在js中,字元串轉為數字類型是比較常見的,平時用的比較多的是parseFloat和parseInt這兩個方法。當然,除了這個方法之外還有一個Number;都是轉為數字類型,有什麼差別? 可以簡單的說Number的局限性更大。也就是說Number比parseFloat和parseInt對字元串的要求更 ...
  • 上一章節我們說到,線性路徑的繪製,主要利用movoTo(),lineTo()等方法,當然 Canvas 2D API 也提供了虛線的繪製方法,CanvasRenderingContext2D.setLineDash(); 下麵我們就來看看虛線的繪製方法 語法 參數 segments: 一個Array ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...