CSS中EM單位的力量

態

鑰匙要點

在CSS中，對於應用EM的元素，EM單元等於計算的字體大小。當在未定義字體大小的子元素上聲明EM單位時，它們會從父母或另一個祖先元素中繼承其字體大小。
• > EM單元與模塊化CSS技術（例如組件級造型或代碼的封裝部分）良好工作。它們可用於確保組件的元素相對於彼此的尺寸，並可以輕鬆調整大小。
> CSS中的REM單元始終從文檔根部元素上的基本字體大小設置繼承其值，而與計算的字體大小無關。因此，您可以使用REMS，但這意味著您必須使用該元素上的字體大小來控制頁面上的所有組件。
• > EM單位具有與像素相比的幾個優點。它們是可擴展的，這意味著它們會根據用戶的默認瀏覽器設置或設備的設置進行調整。這使您的網站更容易被視覺障礙的用戶訪問，這些用戶可能需要增加字體尺寸。 EM單元還允許根據父元素的字體大小進行調整，可以進行更靈活和響應的設計。
。

使用CSS中的每個複雜功能，當您看到該功能的真正功能多麼強大時，您將始終擁有該轉折點。而且，信不信由你，我與EMS的個人轉折點是在我寫了一個充滿雙關語的介紹之後很久。 儘管到那時我已經很好地了解了EMS，但我確實開始看到當我閱讀Simurai在介質上的尺寸（Web）組件上的帖子時，它們的功能有多強大。 因此，我要在這篇文章中騎他的coattail。在這裡，您會發現對EM單元的快速介紹，然後進行現場演示，介紹了他所描述的技術。

CSS中的EMS是什麼？ 在CSS中，EM單元等於用於應用EM的元素的計算字體大小。當在未定義字體大小的子元素上聲明EM單元時，它們將從父母或另一個祖先元素中繼承其字體大小，可能會一直回到文檔上的根元素。 查看以下CSS：

在這種情況下，對此元素或其子元素的1EM（假設沒有其他字體大小的定義）等於20px。因此，如果我們添加了一行：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

這個邊界 - 拉迪烏斯的值為.5em 計算為10px（即20*.5）。相似地：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

2EM的填充值等於40px（20*2）。如前所述，這種類型的計算也適用於任何子元素 - 除非這些子元素中的任何一個具有明確定義的字體大小值，在這種情況下，EM值將根據該值計算。如果未在CSS中任何地方定義字體大小，則EM單元將等於瀏覽器的文檔默認字體大小，該字體通常為16px。 我認為這應該可以清楚地表明EMS的工作原理。現在，讓我們看一下如何使用該技術來製作易於解析的Web組件，如Simurai在原始媒介文章中所討論的那樣。我將通過提供演示來看到這一點，將他的想法進一步邁出。

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

何時在CSS

中使用EM EM單元與模塊化CSS技術（例如組件級的樣式或代碼的封裝部分）的效果很好。例如，它們可用於確保組件的元素（例如卡片的元素）相對於彼此的尺寸，並可以輕鬆地調整大小。 該技術基本上是這樣的：使用字體大小的屬性，如Simurai所指的，用作“特洛伊木馬”，為我們組件中的各個元素或模塊創建基本單元。由於上述EM單元是基於root定義的字體大小上元素上的字體大小來計算的，因此這使整個組件可以通過簡單地更改父元素上的字體大小來易於解析。 讓我們在Codepen演示中查看這一點：

>請參閱codepen上的sitepoint（@sitepoint）的EMS使用EMS的筆這個愚蠢的小模塊中有四個基本元素。沒什麼花哨的，只是一個說明這一技術的例子。移動演示頁面頂部的範圍滑塊以更改模塊的大小。您也可以在全屏上進行測試。將範圍滑塊掛在組件的根元素上的單個值上：字體大小值。 應該注意的是，使組件可使用此單個CSS屬性解析的組件不一定是為了使用戶可以這樣做。主要是為了維護模塊的開發人員可以快速進行調整，而不必擺弄組件的所有部分的不同值。 如上一節所述，隨著字體大小的變化，這會滴入該父元素上設置的所有EM值以及其所有子元素，從而使組件的所有部分都按比例靈活。 如果您檢查CSS，您會注意到以下內容：

• 組件內部的所有內容均大大為EMS，除了外部邊框（我們希望始終保持在2px）和圖像，如果我們願意，我可以調整大小的圖像，但是我對它的尺寸對這種情況感到滿意。
>
• >
>右上角的類似淚滴的東西是偽元素，它同樣從父母的基本字體大小上受益。
• > CSS還包括兩個調整父上字體大小的媒體查詢。同樣，這顯示了此技術的有用性，因為您不必更改媒體查詢中的所有各種尺寸，而只需更改字體大小。
>

一些筆記，缺陷等。

> 從使用演示中的範圍滑塊可以看到，這種靈活的調整併不總是您想使用的。這可能有些限制。 您可能需要調整一些EM值才能使它們獲得自己喜歡的方式，並且，與演示中的父邊界一樣，您可能不希望調整大小的能力適用於所有元素。您可以通過簡單地避開要遺漏的元素來輕鬆克服這一點。 如Simurai的原始文章的討論中所述，您不必使用PX單元來設置ROOT字體大小。您也可以為此使用EMS，但請記住，這將以與父母相同的方式繼承，這可能來自文檔對字體大小的默認值。

REMS和SASS呢？

> CSS中的REM單元始終從文檔的根元素上的基本字體大小設置繼承其值，而與計算字體大小無關。在HTML中，根元素始終是HTML元素。因此，您可以使用REMS，但這意味著您必須使用該元素上的字體大小來控制頁面上的所有組件。它可以在某些項目上起作用，但是我認為，當將可重構性集中在孤立的組件上而不是整個文檔上時，這種技術最有效。 至於使用像Sass這樣的預處理器，我認為這是一個側點。最終，您的編譯樣式表將使用您在SASS代碼中使用的任何單元，並且繼承將以相同的方式工作。

結論

如前所述，Simurai值得使這項技術更廣為人知。當然，正如他所提到的那樣，這並不是什麼新鮮事物，多年來，許多經驗豐富的開發人員已經使用了基本概念，但是在Web組件或模塊的背景下，也許不是那麼多。 正如Simurai所說，我認為這是構建CSS框架或組件庫時使用的一種很好的方法，如果沒有其他的話，我認為該技術確實會使EM單元的功能強大。 當然，EM並不是唯一可用的CSS單元。查看我們對CSS尺寸單元的概述。

經常詢問有關CSS

中EM單位的問題（常見問題解答）

CSS中的EM和REM單位之間的區別是什麼？ EM相對於其最接近的母體或當前元素的字體大小。這意味著，如果將元素的字體大小設置為1.2em，則將是父尺寸大小的1.2倍。另一方面，REM相對於根或HTML元素。因此，如果將元素的字體大小設置為1.2REM，則將是根元素字體大小的1.2倍。這使得與EM相比，REM更容易預測，更易於控制。

>如何將像素轉換為CSS中的EM單元？

>將像素轉換為EM單元，您需要知道文檔的基本字體大小。大多數瀏覽器中默認的鹼基大小為16px。因此，如果要將像素值轉換為EM，則將像素值除以基本字體大小。例如，如果要將18px轉換為EM，則將執行18/16 = 1.125EM。

>為什麼我要在CSS？

em單位中使用EM單位而不是像素提供了比像素的幾個優勢。它們是可擴展的，這意味著它們會根據用戶的默認瀏覽器設置或設備的設置進行調整。這使您的網站更容易被視覺障礙的用戶訪問，這些用戶可能需要增加字體尺寸。 EM單元還允許根據母元素的字體大小進行調整，因此可以進行更靈活和響應的設計。

>

>我可以將EM單元用於CSS中的字體大小以外的屬性以外的其他屬性嗎？ 是的，您可以在CSS中使用EM單位來接受數字值的任何屬性，而不僅僅是Font-font-font-font-size。這包括寬度，高度，填充，邊緣和線路高度等屬性。使用EM單元作為這些屬性可以幫助維持設計中的比例關係。

>如何通過在HTML元素上設置font-size屬性來設置CSS中的EM單元的基本字體大小。例如，如果您希望基本字體大小為18px，則將寫：html {font-size：18px; }。然後，您的CS中的所有EM單元都將相對於此基本字體大小。

>

>如果我在CSS中使用EM單位嵌套元素？

，如果您嵌套具有EM單元的元素，則孩子的大小將與父元素的大小相對。這可能會導致複合效果，其中兒童元素的大小比預期的大或更小。為了避免這種情況，您可以使用REM單元，這些單元始終相對於根部元素的大小。

>

>在CSS中使用EM單元是否有缺點？

>

，而EM單位具有許多優勢，它們也可能比像絕對單位一樣難以管理。因為EM單位是相對的，所以它們的實際大小可以根據上下文改變。這可能會使更難預測元素的大小，尤其是在帶有嵌套元素的複雜佈局中。

如何覆蓋CSS中的EM單元中設置的元素的大小？

>您可以通過設置更特定的選擇者中的em單元中設置的元素設置的大小來覆蓋元素的大小。 CSS遵循特異性層次結構，其中更特定的選擇器覆蓋了較少的特定性。例如，ID選擇器將覆蓋類選擇器，並且類選擇器將覆蓋類型的選擇器。

>

>我可以在CSS中的媒體查詢中使用EM單元嗎？實際上，在媒體查詢中使用EM單元可以提高設計的響應能力。由於EM單元是相對的，因此它們會根據用戶的默認瀏覽器設置或設備的設置進行調整。這意味著您的媒體查詢將適應用戶的設置，而不僅僅是視口尺寸。

>

>如何計算CSS中具有EM單元的嵌套元素的大小？

>

如何計算具有EM單元的嵌套元素大小，您將父元素的大小乘以子元素的大小。例如，如果父元素的大小為1.5em，並且子元素的大小為2em，則子元素的實際大小為1.5 * * 2 = 3em。這是因為子元素的大小相對於父元素的大小。

>

以上是CSS中EM單位的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！