CSS3 新增長度單位

提問人：劉團圓發(fā)布時間：2020-11-19

rem (font size of the root element)是指相對于根元素的字體大小的單位，但它與em單位不同，em (font size of the element)是指相對于父元素的字體大小的單位。rem的計算規(guī)則是依賴根元素，em的計算規(guī)則是依賴父元素計算。

在計算子元素的尺寸時：只要根據(jù)HTML元素的字體大小計算即可。不再像使用em時，要找父元素的字體大小，然后進行頻繁的計算，根本就離不開計算器。

HTML的字體大小設(shè)置為font-size:62.5%。瀏覽器默認字體大小是16px, 1rem=10px, 10/16 =0.625-62.5%,所以為了子元素相關(guān)尺寸的計算方便，就將HTML的宇體大小表示為font-size: 62.5%。只要將設(shè)計稿中量到的px尺寸除以10,就得到了相應(yīng)的rem尺寸。

下面通過一個實例來領(lǐng)略rem的風采。

【例題】使用rem

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

html{font-size: 62.5%;}

p{font-size: 2rem;}

div{font-size: 2em}

p span{font-size: 2rem;}

div span{font-size: 2em;}

</style>

</head>

<body>

<div>這是<span>div標簽</span>中的文本</div>

</body>

</html>

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答

回復(fù)(0)

點擊加載更多評論>>

CSS3 新增長度單位

繼續(xù)查找其他問題的答案？

最近更新