CSS中EM單位的力量-css教學-PHP中文網

> EM單元與模塊化CSS技術（例如組件級造型或代碼的封裝部分）良好工作。它們可用於確保組件的元素相對於彼此的尺寸，並可以輕鬆調整大小。
> 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尺寸單元的概述。