」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > REM在CSS中:理解和使用REM單位

REM在CSS中:理解和使用REM單位

發佈於2025-02-17
瀏覽:300

Rem in CSS: Understanding and Using rem Units

深入理解CSS中的rem单位:一种具有出色浏览器兼容性的相对大小单位,学习如何有效地使用它们。

关键要点

  1. 理解rem单位: 学习CSS rem单位,它相对于根元素的字体大小,为您的UI中的字体大小和间距提供一致的方法。
  2. 比较rem和em单位: 探索CSS中rem和em单位的区别,rem提供了一种更简单、更一致的大小调整方法,避免了与em单位嵌套相关的复杂性。
  3. 实际应用和可访问性: 发现rem单位在响应式设计、缩放文档和确保网络可访问性方面的实际用途,允许用户根据自己的喜好调整字体大小。

什么是rem单位?

在CSS中,rem代表“root em”,这是一个测量单位,代表根元素的字体大小。这意味着1rem等于html元素的字体大小,对于大多数浏览器来说,默认值为16px。使用rem可以帮助确保整个UI中字体大小和间距的一致性。

根据W3C规范,一个rem单位的定义是:

等于根元素上font-size的计算值。当在根元素的font-size属性上指定时,rem单位指的是该属性的初始值。

rem单位与em单位

rem单位和em单位的区别在于,em单位相对于自身元素的字体大小,而不是根元素。因此,它们可能会级联并导致意外的结果。让我们考虑以下示例,我们希望列表的字体大小为12px,在根字体大小为默认16px的情况下:

html {font-size: 100%;}
ul {font-size: 0.75em;}

如果我们有一个嵌套在另一个列表中的列表,则内部列表的字体大小将是其父级大小的75%(在本例中为9px)。我们仍然可以通过使用类似以下内容来克服这个问题:

ul ul {font-size: 1em;}

这确实有效,但是我们仍然必须非常注意嵌套更深的情况。

使用rem单位,事情就简单多了:

html {font-size: 100%;}
ul {font-size: 0.75rem;}

由于所有大小都参考根字体大小,因此不再需要在单独的声明中处理嵌套情况。

使用rem单位进行字体大小调整

使用rem单位进行字体大小调整的先驱之一是Jonathan Snook,他在2011年5月发表了关于使用REM进行字体大小调整的文章。像许多其他CSS开发人员一样,他不得不面对em单位在复杂布局中带来的问题。

当时,旧版本的IE仍然占据着很大的市场份额,它们无法缩放使用像素大小的文本。但是,正如我们前面看到的,使用em单位很容易忽略嵌套并获得意外的结果。

使用rem进行字体大小调整的主要问题是这些值不太方便使用。让我们看一个用rem单位表示的一些常用字体大小的示例,当然,假设基准大小为16px:

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem(基准)
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

正如我们所看到的,这些值对于进行计算来说并不方便。因此,Snook使用了一种称为“62.5%”的技巧。这绝不是一个新的发现,因为它已经被用于em单位:

body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */

由于rem单位相对于根元素,因此Snook的解决方案变为:

html { font-size: 62.5%; } /* =10px */body { font-size: 1.4rem; } /* =14px */h1 { font-size: 2.4rem; } /* =24px */

我们还必须考虑不支持rem的其他浏览器。因此,上面的代码实际上是这样编写的:

html {font-size: 62.5%;}
body {font-size: 14px;font-size: 1.4rem;}
h1 {font-size: 24px;font-size: 2.4rem;}

虽然此解决方案似乎接近“黄金法则”的地位,但有些人建议不要盲目地使用它。Harry Roberts写了他自己关于rem单位使用的看法。在他看来,虽然62.5%的解决方案使计算更容易(因为px中的字体大小是其rem值的10倍),但它最终迫使开发人员显式地重写其网站中的所有字体大小。

第三种观点来自CSS-Tricks的Chris Coyier。他的解决方案使用了我们目前遇到的所有三个单位。他保留了以px定义的根大小,以rem单位定义的模块,以及以em单位大小的模块内元素。这种方法更容易操作全局大小,这会缩放模块中的类型,而模块内容则基于模块本身的字体大小进行缩放。Louis Lazaris后来在《CSS中em单位的力量》中讨论了这个概念。

在下面的示例中,您可以看到Chris的方法是什么样的:

[CodePen示例链接 - 此处应插入CodePen的嵌入代码,但由于我无法访问外部网站,我无法提供。]

在实践中,像Bootstrap 4和Material Design指南这样的主要框架使用rem单位来调整文本内容的大小。

特别要提到的是Material-UI,这是一个非常流行的React组件集合。他们不仅以相同的方式调整文本大小,而且还提供了一种实现我们前面提到的“10px简化”的机制。

另一个最近的项目Every Layout以一种非常有创意的方式结合了em和rem单位。它最接近前面提到的Chris Coyier的模型概述,并且它使用em单位来强调内联元素,如SVG图标、span或其他类似元素。

正如您所看到的,没有“万能的”解决方案。可能的组合仅受开发人员的想象力限制。

在媒体查询断点中使用rems

在媒体查询中使用em或rem单位与“最佳行长”的概念及其对阅读体验的影响密切相关。Smashing Magazine发表了一篇关于网络排版的综合研究文章,名为《大小很重要:在响应式网页设计中平衡行长和字体大小》。在许多其他有趣的事情中,文章给出了最佳行长的估计值:45到75-85个字符之间(包括空格和标点符号),其中65是“理想”的目标值。

使用1rem = 1字符的粗略估计,我们可以控制单列内容的文本流,采用移动优先方法:

.container {width: 100%;}
@media (min-width: 85rem) {.container {width: 65rem;}}

但是,在媒体查询中用作单位时,rem和em单位有一个有趣的细节:它们始终保持1rem = 1em = 浏览器设置的字体大小的相同值。此行为的原因在媒体查询规范中进行了解释(重点突出):

媒体查询中的相对单位基于初始值,这意味着单位从不基于声明的结果。例如,在HTML中,em单位相对于font-size的初始值,由用户代理或用户的偏好定义,而不是页面上的任何样式。

让我们快速了解一下这种行为的示例:

[CodePen示例链接 - 此处应插入CodePen的嵌入代码,但由于我无法访问外部网站,我无法提供。]

首先,在我们的HTML中,我们有一个元素,我们将在其中写入视口的宽度:

Document width: >>px

接下来,我们有两个媒体查询,一个使用rem单位,另一个使用em单位(这使用Sass是为了简单起见):

html {font-size: 62.5%; /* 62.5% of 16px = 10px */
@media (min-width: 20rem) {/* 20*16px = 320px */background-color: lemonchiffon;font-size: 200%;/* 200% of 16px = 32px */}
@media (min-width: 30em) {/* 30*16px = 480px */background-color: lightblue;font-size: 300%; /* 300% of 16px = 48px */}}

最后,我们使用一些jQuery在页面上显示视口宽度,并在窗口大小改变时更新该值:

$('span').text($(window).width());
$(window).on('resize', function(e) {$('span').text($(window).width());});

我们从62.5%的技巧开始,以表明修改后的根字体大小对媒体查询中使用的值没有任何影响。当我们更改浏览器窗口的宽度时,我们可以看到第一个媒体查询在320px(20 × 16px)处启动,而第二个媒体查询在480px(30 × 16px)处启动。我们声明的字体大小更改对断点没有任何影响。更改媒体查询断点值的唯一方法是修改浏览器设置中的默认字体大小。

因此,在媒体查询断点中使用em或rem单位实际上并没有什么区别。Zurb Foundation(目前在撰写本文时为v6.5.3)在媒体查询中使用了em单位。

可访问性追求

我们上面已经看到,基于根字体大小进行缩放的能力使rem单位对于可访问性非常有用。Google开发人员建议使用相对单位进行文本大小调整。

互联网档案背后的工作人员进行了一项实证研究,结果表明,大量用户会更改其浏览器设置中的默认字体大小。通过使用rem和其他相对单位,您可以尊重用户关于他们希望如何浏览网页的决定。

使用rem单位缩放文档

我们可以找到rem单位的第三个用途是构建可缩放的组件。通过以rem单位表示宽度、边距和填充,可以创建与根字体大小同步增长或缩小的界面。让我们看看这个东西是如何使用几个例子工作的。

[CodePen示例链接1 - 此处应插入CodePen的嵌入代码,但由于我无法访问外部网站,我无法提供。]

[CodePen示例链接2 - 此处应插入CodePen的嵌入代码,但由于我无法访问外部网站,我无法提供。]

结论

我们在这里结束与CSS rem单位的相遇。很明显,在我们的代码中使用这些单位有很多优点,例如响应性、可伸缩性、改进的阅读体验和更大的组件定义灵活性。Rem单位不是通用的万能解决方案,但是,通过仔细部署,它们可以解决困扰开发人员多年的许多问题。这取决于我们每个人来释放rems的全部潜力。启动您的编辑器,进行实验,并与我们其他人分享您的结果。

有关CSS大小单位的更多信息,请参阅:

  • 了解CSS中的长度单位
  • 新的CSS3相对字体大小单位
  • CSS中em单位的力量

当然,Rem不是唯一可用的CSS单位。查看我们的CSS大小单位概述。

关于CSS中Rem的常见问题解答

CSS中rem和em单位有什么区别?

CSS中rem和em单位的主要区别在于它们计算大小的参考点。em单位相对于其最近的父元素的字体大小。如果您嵌套元素,则每个级别都可能根据其父级的大小具有不同的字体大小,从而导致复合大小。另一方面,rem代表“root em”。它只相对于根元素(html),这使得它在文档中的任何位置使用都是一致的。这使得rem单位在大型CSS文件中更易于预测和管理。

如何将像素转换为CSS中的rem单位?

要将像素转换为rem单位,您需要知道文档的基准字体大小,通常为16px(大多数浏览器的默认大小)。转换公式为:目标像素值/基准字体大小=rem值。例如,如果您想要24px的字体大小,则rem中的等效值为24px/16px=1.5rem。

我可以将rem单位用于字体大小以外的属性吗?

是的,rem单位可以用于任何需要长度值的CSS属性,而不仅仅是字体大小。这包括width、height、padding、margin和line-height等属性。将rem单位用于这些属性可以帮助在不同的屏幕尺寸上保持成比例的间距和布局。

所有浏览器都支持rem单位吗?

是的,所有现代浏览器都广泛支持rem单位,包括Chrome、Firefox、Safari、Edge和Internet Explorer 9及更高版本。但是,对于不支持rem单位的旧版浏览器,您可以提供像素回退。

使用rem单位如何有利于响应式设计?

rem单位对于响应式设计非常有益。由于rem相对于根元素,因此更改根字体大小允许您调整以rem定义的所有元素的大小。这可以在媒体查询中完成,允许为不同的屏幕尺寸提供不同的字体大小,从而使您的设计具有响应性。

使用rem单位对可访问性的影响是什么?

使用rem单位可以显著提高您网站的可访问性。有些用户可能会调整其浏览器的默认字体大小以提高可读性。由于rem单位相对于此基准字体大小,它允许您的网站的布局和间距根据用户的偏好进行调整,从而改善整体用户体验。

如何覆盖以rem单位定义的样式?

您可以通过使用CSS特异性或!important规则来覆盖以rem单位定义的样式。但是,建议谨慎使用这些方法,而应以一种最大限度地减少对覆盖的需求的方式来构建您的CSS。

我可以将rem单位与其他单位(如像素或百分比)组合使用吗?

是的,rem单位可以与其他单位(如像素或百分比)组合使用。这可以为您的设计提供更大的灵活性。例如,您可以将像素用于边框宽度(不需要随文本大小缩放),并将rem单位用于填充(需要)。

如何设置rem单位的基准字体大小?

rem单位的基准字体大小是在根元素(html)上使用font-size属性设置的。例如,如果您希望基准字体大小为10px,则可以使用:html { font-size: 10px; }。然后,所有rem单位都将相对于此大小。

使用CSS中rem单位的最佳实践是什么?

在CSS中使用rem单位的一些最佳实践包括:在根元素上设置合理的基准字体大小;将rem单位用于需要随文本大小缩放的属性;为旧版浏览器提供像素回退;以及在不同的字体大小下测试您的设计,以确保它保持可访问性和视觉平衡。

最新教學 更多>
  • 在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法
    在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法
    在UTF8表中將latin1字符轉換為utf8 ,您遇到了一個問題,其中含義的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致電。為了解決此問題,您正在嘗試使用“ mb_convert_encoding”和“ iconv”轉換受...
    程式設計 發佈於2025-04-29
  • JavaScript中如何動態訪問全局變量?
    JavaScript中如何動態訪問全局變量?
    在JavaScript 一種方法是使用窗口對象存儲和檢索變量。通過引用全局範圍,可以使用其名稱動態訪問變量。 //一個腳本 var somevarname_10 = 20; //另一個腳本 window.all_vars = {}; window.all_vars ['somevarna...
    程式設計 發佈於2025-04-29
  • 如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求模擬瀏覽器行為,以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header,以提供有效的用戶 - 設置,該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...
    程式設計 發佈於2025-04-29
  • 在PHP中如何高效檢測空數組?
    在PHP中如何高效檢測空數組?
    在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在,則PHP的鬆散鍵入允許對數組本身進行直接評估:一種更嚴格的方法涉及使用count()函數: if(count(count($ playerList)=== 0){ //列表為空。 } 對...
    程式設計 發佈於2025-04-29
  • 如何使用Regex在PHP中有效地提取括號內的文本
    如何使用Regex在PHP中有效地提取括號內的文本
    php:在括號內提取文本在處理括號內的文本時,找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數,如下所示: 作為替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式來搜索特...
    程式設計 發佈於2025-04-29
  • VSCode在Go模板中顯示CSS驗證錯誤的原因
    VSCode在Go模板中顯示CSS驗證錯誤的原因
    在使用GO的html/template軟件包和編寫諸如mypage.tmpl之類的編寫模板時,對VSCODE中的CSS錯誤進行故障排除。 mypage.tmpl:可以觸發以下錯誤: 嘗試在樣式的html attribute。 settings。搜索“ html.validate.styles”。將其...
    程式設計 發佈於2025-04-29
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-04-29
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-04-29
  • 如何使用Python有效地以相反順序讀取大型文件?
    如何使用Python有效地以相反順序讀取大型文件?
    在python 中,如果您使用一個大文件,並且需要從最後一行讀取其內容,則在第一行到第一行,Python的內置功能可能不合適。這是解決此任務的有效解決方案:反向行讀取器生成器 == ord('\ n'): 緩衝區=緩衝區[:-1] ...
    程式設計 發佈於2025-04-29
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, AttributeError: SomeClass...
    程式設計 發佈於2025-04-29
  • 哪種方法更有效地用於點 - 填點檢測:射線跟踪或matplotlib \的路徑contains_points?
    哪種方法更有效地用於點 - 填點檢測:射線跟踪或matplotlib \的路徑contains_points?
    在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...
    程式設計 發佈於2025-04-29
  • Python實現鍵盤輸入超時功能的技巧
    Python實現鍵盤輸入超時功能的技巧
    等待超時輸入鍵盤輸入用戶輸入檢索過程可能會耗時,尤其是在使用大量數據時。為了防止過度等待,希望在輸入提示期間實現超時。 一個解決方案涉及利用選擇調用。此方法是簡潔且可移植的:導入sys,選擇 打印(“您有十秒鐘可以回答!”) #將`timeout'指定為10秒 i,o,e = select...
    程式設計 發佈於2025-04-29
  • 版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    在時間戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源於遺留實現的關注,這些限制需要對當前的_timestamp功能進行特定的實現。 創建表`foo`( `Productid` int(10)unsigned not ...
    程式設計 發佈於2025-04-29
  • 如何從2D數組中提取元素?使用另一數組的索引
    如何從2D數組中提取元素?使用另一數組的索引
    Using NumPy Array as Indices for the 2nd Dimension of Another ArrayTo extract specific elements from a 2D array based on indices provided by a second ...
    程式設計 發佈於2025-04-29
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-04-29

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3