溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3中如何使用REM單位

發(fā)布時間：2020-10-12 15:18:20 來源：億速云 閱讀：170 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)CSS3中如何使用REM單位，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

那么，我們?nèi)绾问褂肦EM？

假設(shè)我們有這個CSS：

CSS

article h3 {font-size:20px;}
article p {font-size:12px;}

首先，我們需要確定相對于所有字體的px大小。為了方便起見，我所做的最好的做法是使root font-size 1px像這樣：

CSS

html {font-size:1px;}

其次，我們需要將其余的字體大小值從像素替換為rem單位。

CSS

article h3 {font-size:20rem;}
article p {font-size:12rem;}

REM做什么，需要20REM并將其與根元素相乘：

20 REM  *  1 PX = 20PX.

瀏覽器支持

IE7和IE8仍然需要使用PX值。這將迫使我們兩次寫入字體大小，一次在PX中，第二次用REM。

CSS

article h3 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
html{font-size:1px;}
article h3{
  font-size:20px;/*Support IE7 & IE8*/
  font-size:20rem;
}
article p{
  font-size:12px;/*Support IE7 & IE8*/  
  font-size:12rem;
}
</style>
</head>
<body>
<section>
  <article>
    <h3>億速云</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h3>億速云1</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h3>億速云2</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>  
</section>
</body>
</html>

REM有什么優(yōu)點？

讓我們假設(shè)我們需要將網(wǎng)站中的所有字體放大20％，我們所要做的就是更改根元素中字體大小的大小，如下所示：

html {font-size:1.2px;}

如果你想要將字體大小降低20％，你應(yīng)該會這樣做：

html{font-size:0.8px;}

REM用于響應(yīng)式設(shè)計

如果要根據(jù)響應(yīng)式設(shè)計中的斷點更改所有字體大小，則更容易?？蠢樱?/p>

@media (min-width: 320px){
    html{
        font-size:1.4px;
    }}
@media (min-width: 600px){
    html{
        font-size:1.2px;
    }}

現(xiàn)在在較小的屏幕中，我們可以將所有字體的大小調(diào)整大40％，而在中等屏幕中，我們將其重新調(diào)整大小20％。

使用less來解決兩次寫入內(nèi)容的需求 - 用于支持舊瀏覽器

在less或sass中你可以添加函數(shù)來節(jié)省你寫兩次的所有時間。

可以使用less - font-size函數(shù)并調(diào)用它

.font-size(@font-size) {    
  font-size : @font-size * 1px;
  font-size : @font-size * 1rem;
  }
  article h3 {
  .font-size(20);
  }

編譯后的CSS將如下所示：

article h3{
  font-size:20px;
  /*Support IE7 & IE8*/
  font-size:20rem;
  }

關(guān)于CSS3中如何使用REM單位就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手