您現在的位置是:電腦技術吧?>? 故障問題 ??>??px rem em,px em rem區別??>??正文詳情

px rem em,px em rem區別

律興國2019-11-25 11:41:29 人圍觀
簡介px和em的像素。相對長度單位。像素PX是相對于顯示屏的分辨率EM是相對長度的單位。相對于當前對象中文本的字體大小。如果當前內聯文本的字體大小不是人為設置的,則它與瀏覽器的

px像素(Pixel)。

相對長度單位。

像素px是相對于顯示器屏幕分辨率而言的。

  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會繼承父級元素的字體大小。

  所以我們在寫em的時候,需要注意兩點:  1. body選擇器中聲明Font-size=62.5%;  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處理漢字時,對于浮點的取值精確度有限。

不知道有沒有其他的解釋。

  rem是CSS3新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。

這個單位與em有什么區別呢?區別在于使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML 根元素。

這個單位可謂集相對大小和絕對大小的優點于一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。

目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。

版權聲明:本文由 律興國 整理編輯。

原標題:rem和em有哪些不同,emrem

轉載注明出處:http://www.dn9ww09s.icu/fault/14299.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • kb4471328安裝失敗,kb4501375安裝失敗

    kb4471328安裝失敗,kb4501375安裝失敗 相關圖片kb4019990安裝失敗蠕蟲還沒有完全解決,出現了更嚴重的病毒。一些用戶擔心。超人軟件站為您提供了多種預防軟件,必要時可以下載。但是,一些用戶報告kb401215安裝失敗。Kb4012kb405451...

  • 掌閱ireader,掌閱ireader老版本

    掌閱ireader,掌閱ireader老版本 相關圖片掌閱ireader經典版本近兩年來,手工閱讀產品深受消費者歡迎。近日,第三代產品ireader light在掌上閱讀Android中發布,這并不是一個普通的升級,因為這款產品是目前最輕的掌閱ireader a6...

  • flash,flash空白關鍵幀

    flash,flash空白關鍵幀 相關圖片flash組件三類一。效果:請參見開頭的“播放”按鈕。單擊“播放”按鈕開始播放音樂并顯示“停止”按鈕。單擊“停止”按鈕停止音樂并顯示“播放”按鈕。然后單擊“播放”按鈕,從...

  • 445端口如何打開,怎么打開端口

    445端口如何打開,怎么打開端口 相關圖片開啟445端口的方法勒索病毒還沒有結束。近日,勒索病毒開始攻擊王者榮耀安卓用戶,而電腦玩家也應引起重視。為了防止勒索病毒入侵,很多用戶通過軟件和系統關閉了445端口,但關...

  • 總監設計師,設計師總監的職責

    總監設計師,設計師總監的職責 相關圖片室內設計總監崗位職責磨一個成熟的產品,設計一個全新的項目,你選擇哪一個?今天Facebook主管的一篇好文章說了許多設計師的心聲。改進和優化已經存在超過五年的復雜產品是非常困...

  • 閃電上征信嗎,閃電貸款上征信嗎

    閃電上征信嗎,閃電貸款上征信嗎 相關圖片閃電借款上人行征信嗎Flash學習是一個非常實用的貸款軟件。在這個軟件中,用戶可以輕松地借錢,而不用擔心月底缺錢。那么在學生會上的信用調查呢?接下來,超人軟件編輯將介紹過...

  • 文理分科,文理學院

    文理分科,文理學院 相關圖片寶雞文理智能文理是一種閱讀和學習軟件。在這個軟件中,不僅學生可以得到一個專業的學習平臺,教師也可以得到一個教學平臺。那么如何運用智慧和藝術呢?接下來,超人軟件編輯...

  • python ip地址處理,python獲取ip地址

    python ip地址處理,python獲取ip地址 相關圖片python獲取內網ip地址本文主要介紹Python將IP地址轉換成整數的方法,包括Python對IP地址的轉換技巧。對于需要的朋友,請參考下面的示例來描述Python將IP地址轉換為整數python生成ip地址加...

  • 王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績

    王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績 相關圖片王者榮耀助手在哪下載如今,年輕人業余時間最喜歡的事情就是吸引朋友,開黑車。不過,如果他們不想和隊友一起開黑車,就應該先用國王的榮耀助手看看朋友們的成就。國王的榮耀...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用焰火來創建水晶般清晰的效果。讓我們學習以下內容。首先,看看最終效果圖:第一步是隨意創建一個新的畫布,填充背景色為﹐000066,畫出鋼筆...

熱評文章

  • 怎么用手,用手

    怎么用手,用手 相關圖片手相最近,有很多小型的合作演出。當他們的手更新到2.2版之后,就不能使用了。如果不能使用手2.2,我們該怎么辦?下一步,超人軟件將介紹如何做,如果手2.2不能使用。諾手...

  • 打破玻璃,玻璃

    打破玻璃,玻璃 相關圖片玻璃劃傷本教程介紹如何使用焰火制作碎玻璃的GIF動畫效果。制作方法不是很難,效果也很好。我推薦,希望你喜歡!首先,讓我們看看最終的效果:以下是具體的生產方法:1。下載過...

  • 高德地圖手機離線導航,高德地圖離線下載后怎么使用

    高德地圖手機離線導航,高德地圖離線下載后怎么使用 相關圖片高德地圖新版怎么離線作為中國最大的電子地圖,你知道它也有很酷的離線導航功能嗎?如何設置離線導航?接下來,超人軟件編輯將介紹iPhone版高德地圖的離線導航高德地圖現在沒有...

  • 網頁設計配色教程,網頁設計配色方案

    網頁設計配色教程,網頁設計配色方案 相關圖片設計配色在網頁顏色的應用概率中,根據網頁主題內容的需求,以紅色為主色的網站相對較少,主要用于輔助色和修飾色,達到箔和打效果。它通常和其他顏色混合在一起。本文闡述了...

  • 農行k寶電腦怎么使用,農行k寶怎么用 教你九個步驟

    農行k寶電腦怎么使用,農行k寶怎么用 教你九個步驟 相關圖片手機銀行農行k寶怎么用ABC k寶是ABC公司的安全認證產品。它的外觀與U盤相似。由于PKI認證體系的存在,通用k寶(音頻版)具有很高的安全性。ABC k-treasure通過USB個人網上銀行登錄...

  • 環狀排列,環狀排列的水泡

    環狀排列,環狀排列的水泡 相關圖片環形排列為什么要除n本文主要介紹了Python的圖片排列和環形輸出的方法,涉及到Python使用PIL庫操作圖片的技巧,具有一定的參考價值。有需要的朋友可以參考下面的例子來描述Py環狀圖...

  • vue圓形視頻怎么做,vue視頻不要圓的

    vue圓形視頻怎么做,vue視頻不要圓的 相關圖片怎么用vue編輯視頻你不覺得馮小剛拍的我不是潘金蓮的原型視角看起來很酷嗎?事實上,Vue軟件也可以拍攝圓形視頻。如何拍攝Vue圓形視頻?接下來,超人軟件編輯將向您介紹Vue IPHvue為...

  • 幸運奪寶,鉆石奪寶幸運值

    幸運奪寶,鉆石奪寶幸運值 相關圖片奪寶幸運值多少抽水晶作為一款眾籌軟件,lucky loot以其產品數量多、操作簡單而深受很多人的喜愛。那么幸運的戰利品怎么能贏呢?接下來,編輯將為您帶來一個關于如何使用幸運寶的...

  • 動畫幀數,ios動畫為什么那么流暢

    動畫幀數,ios動畫為什么那么流暢 相關圖片過渡動畫縮放Flash作為網頁制作和動畫制作的專業軟件,操作簡單,功能強大。它已經成為交互式矢量圖形和網絡動畫的事實標準,然而,如果制作出的Flash電影文件很大,往往達數ios動...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費今天,超人軟件編輯就為大家介紹一下教程,是關于世紀衛士的。作為一種關于孩子成長的教育軟件,在這里您不僅可以隨時與老師了解孩子的最新情況,還可以了...

關注微信

变脸官网查询