位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

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的字體大小設置為font-size:62.5%。瀏覽器默認字體大小是16px, 1rem=10px, 10/16 =0.625-62.5%,所以為了子元素相關尺寸的計算方便，就將HTML的宇體大小表示為font-size: 62.5%。只要將設計稿中量到的px尺寸除以10,就得到了相應的rem尺寸。

    下面通過一個實例來領略rem的風采。

    【例題】使用rem

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<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>

<p>這是<span>p標簽</span>內(nèi)的文本</p>

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

</body>

</html>

image.png

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

相關視頻回答
回復(0)
返回頂部