搜尋

首頁 >web前端 >css教學 >CSS3中REM單位的用法詳解（程式碼範例）

CSS3中REM單位的用法詳解（程式碼範例）

不言
不言原創
2018-11-07 10:50:134955瀏覽

許多網站都在使用難以在越來越多的不同設備中調整的像素單元，CSS3引入了一些新的單位，包括REM單位，它代表“root em”，這篇文章給大家分享的內容是關於REM的使用。

那麼，我們要如何使用REM？

假設我們有這個CSS：

CSS

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

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

CSS

html {font-size:1px;}

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

CSS

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

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

20 REM  *  1 PX = 20PX.

瀏覽器支援

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

CSS

article h2 {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 h2{
  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>
    <h2>php中文网</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>php中文网1</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>php中文网2</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>  
</section>
</body>
</html>

效果如下：

CSS3中REM單位的用法詳解（程式碼範例）

##REM有什麼優點？

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

html {font-size:1.2px;}

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

html{font-size:0.8px;}

REM用於響應式設計

如果要根據響應式設計中的斷點更改所有字體大小，則更容易。看例子：

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

現在在較小的螢幕中，我們可以將所有字體的大小調整大40％，而在中等螢幕中，我們將其重新調整大小20％。

使用less來解決兩次寫入內容的需求- 用於支援舊瀏覽器

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

可以使用less - font-size函數並呼叫它

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

編譯後的CSS將如下所示：

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

以上是CSS3中REM單位的用法詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css偽類之nth-child()範例詳解下一篇：css偽類之nth-child()範例詳解

相關文章

看更多