欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中px、em和rem的區(qū)別總結(jié)

  發(fā)布時(shí)間:2017-02-24 14:39:57   作者:songsong   我要評(píng)論
相信每位前端工程師們都有這么一個(gè)體會(huì),國(guó)內(nèi)的設(shè)計(jì)師大都喜歡用px,而國(guó)外的網(wǎng)站大都喜歡用em和rem,那么三者有什么區(qū)別,又各自有什么優(yōu)劣呢?下面這篇文章小編就來(lái)給大家詳細(xì)介紹關(guān)于css中px、em和rem的區(qū)別,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。

前言

em 和 rem 都是靈活可擴(kuò)展的單位,由瀏覽器轉(zhuǎn)換為像素值,取決于設(shè)計(jì)中的字體大小,如果使用值 1em 或 1rem ,它可以被瀏覽器轉(zhuǎn)換為從 16px 到 160px 或其他任意值。瀏覽器使用 1px ,那么 1px 始終顯示為完全 1px。

em 和 rem 的相同點(diǎn)

使用 em 和 rem 單位可以讓我們的設(shè)計(jì)更加靈活,能夠控制元素整體放大縮小,而不是固定大小

em 和 rem 區(qū)別

區(qū)別是瀏覽器根據(jù)誰(shuí)來(lái)轉(zhuǎn)化成 px 值

rem 單位如何轉(zhuǎn)化為像素值

當(dāng)使用 rem 單位,他們轉(zhuǎn)化為像素大小取決于頁(yè)根元素的字體大小,即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。

例如,根元素的字體大小 16px,10rem 將等同于 160px,即 10 x 16 = 160。

em 單位如何轉(zhuǎn)換為像素值

當(dāng)使用em單位時(shí),像素值將是 em 值乘以使用 em 單位的元素的字體大小。例如,如果一個(gè) div 有 18px 字體大小,10em 將等同于 180px,即 10 × 18 = 180。

重點(diǎn)理解:

有一個(gè)比較普遍的誤解,認(rèn)為 em 單位是相對(duì)于父元素的字體大小。 事實(shí)上,根據(jù)W3標(biāo)準(zhǔn) ,它們是相對(duì)于使用em單位的元素的字體大小。父元素的字體大小可以影響 em 值,但這種情況的發(fā)生,純粹是因?yàn)槔^承。 讓我們看看為什么以及如何起作用。

你需要知道的:

根 html 元素將繼承瀏覽器中設(shè)置的字體大小,除非顯式設(shè)置固定值去覆蓋。所以 html 元素的字體大小雖然是直接確定 rem 值,但字體大小可能首先來(lái)自瀏覽器設(shè)置。因此瀏覽器的字體大小設(shè)置可以影響每個(gè)使用 rem 單元以及每個(gè)通過(guò) em 單位繼承的值。

總結(jié)與 rem 差異 em

上述所有歸結(jié)如下:

  1. rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會(huì)被瀏覽器中字體大小的設(shè)置影響,除非顯式重寫(xiě)一個(gè)具體單位。
  2. em 單位轉(zhuǎn)為像素值,取決于他們使用的字體大小。 此字體大小受從父元素繼承過(guò)來(lái)的字體大小,除非顯式重寫(xiě)與一個(gè)具體單位。

為什么使用 rem 單位:

Rem 單位提供最偉大的力量并不僅僅是他們提供一致尺寸而不是繼承。 相反,它給我們的一個(gè)途經(jīng)去獲取用戶的偏好來(lái)影響網(wǎng)站中每一處使用rem的元素大小,不再是使用固定的 px 單位。
為此,使用 rem 單位的主要目的應(yīng)該是確保無(wú)論用戶如何設(shè)置自己的瀏覽器,我們的布局都能調(diào)整到合適大小。

為什么使用 em 單位

em 單位取決于一個(gè)font-size值而非 html 元素的字體大小。

為此,em 單位的主要目的應(yīng)該是允許保持在一個(gè)特定的設(shè)計(jì)元素范圍內(nèi)的可擴(kuò)展性。

例如,您可能使用em 值設(shè)置導(dǎo)航菜單項(xiàng)的padding、 margin,line-height等值。帶有0.9rem 字體大小的菜單

通過(guò)這種方式,如果您更改菜單的字體大小菜單項(xiàng)周圍的間距將在剩余的空間按比例縮放。

總結(jié)

  • rem 和 em 單位是由瀏覽器基于你的設(shè)計(jì)中的字體大小計(jì)算得到的像素值。
  • em 單位基于使用他們的元素的字體大小。
  • rem 單位基于 html 元素的字體大小。
  • em 單位可能受任何繼承的父元素字體大小影響
  • rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。
  • 使用 em 單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小。
  • 在不需要使用em單位,并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。
  • 使用rem單位,除非你確定你需要 em 單位,包括對(duì)字體大小。
  • 媒體查詢中使用 rem 單位
  • 不要在多列布局中使用 em 或 rem -改用 %。
  • 不要使用 em 或 rem,如果縮放會(huì)不可避免地導(dǎo)致要打破布局元素。

以上就是關(guān)于css中px、em和rem區(qū)別的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)的大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。

相關(guān)文章

  • 淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別

    這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-25
  • CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解

    這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2020-03-16
  • postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)

    這篇文章主要介紹了postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)
    2019-12-03
  • css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐

    這篇文章主要介紹了css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-30
  • 移動(dòng)端使用 rem 單位時(shí) css sprites 定位問(wèn)題的解決

    現(xiàn)在開(kāi)發(fā)移動(dòng)端 wap 頁(yè)面,相信大家都會(huì)使用強(qiáng)大的 rem 單位去適配各種機(jī)型和屏幕;這篇文章主要介紹了移動(dòng)端使用 rem 單位時(shí) css sprites 定位問(wèn)題的解決,小編覺(jué)得挺不錯(cuò)
    2018-06-20
  • CSS中px em rem區(qū)別與使用

    本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-03-27
  • 知識(shí)普及:徹底搞懂CSS中單位px和em,rem的區(qū)別

    國(guó)內(nèi)的設(shè)計(jì)師大都喜歡用px,而國(guó)外的網(wǎng)站大都喜歡用em和rem,那么三者有什么區(qū)別呢?下面腳本之家小編給大家詳細(xì)介紹下
    2016-05-06
  • CSS 中 em 和 rem 單位的區(qū)別解析

    這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-05-24

最新評(píng)論