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

CSS3 新增長(zhǎng)度單位

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

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

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

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

    下面通過一個(gè)實(shí)例來領(lǐng)略rem的風(fēng)采。

    【例題】使用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標(biāo)簽</span>內(nèi)的文本</p>

<div>這是<span>div標(biāo)簽</span>中的文本</div>

</body>

</html>

image.png

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

相關(guān)視頻回答
回復(fù)(0)
返回頂部