溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS3中如何使用REM單位，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
那么，我們如何使用REM？
假設我們有這個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有什么優點？
讓我們假設我們需要將網站中的所有字體放大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 h3 {
.font-size(20);
}編譯后的CSS將如下所示：
article h3{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}關于CSS3中如何使用REM單位就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
