rem單位使用法

2021-08-21 08:22:09 字數 549 閱讀 5753

css3的出現,他同時引進了一些新的單位,包括我們今天所說的rem。在w3c官網上是這樣描述rem的——「font size of the root element」 。下面我們就一起來詳細的了解rem。

前面說了「em」是相對於其父元素來設定字型大小的,這樣就會存在乙個問題,進行任何元素設定,都有可能需要知道他父元素的大小,在我們多次使用時,就會帶來無法預知的錯誤風險。而rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值,,在根元素中設定多大的字型,這完全可以根據您自己的需,大家也可以參考下圖:

我們來看乙個簡單的**例項

html 

body

h1

我在根元素中定義了乙個基本字型大小為62.5%(也就是10px。設定這個值主要方便計算,如果沒有設定,將是以「16px」為基準 )。從上面的計算結果,我們使用「rem」就像使用「px」一樣的方便,而且同時解決了「px」和「em」兩者不同之處。

如何使用rem單位

最近搞移動端,真是被rem em與px的換算要了老命了,看了不少文件,似乎弄明白了,這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size,用em就給body設定font size 看了下bootstrap樣式表,html body 其他樣式略哈,就講這兩個主要的。可惜大姐長...

word萬用字元使用法詳解

在word中有一項 查詢 的功能,利用它我們可以迅速地找到要編輯或者修改的文字,該功能的使用方法如下 單擊 編輯 選單中的 查詢 命令,即可彈出 查詢和替換 對話方塊,在 查詢內容 中我們可以輸入要查詢的內容,word查詢不但支援像 和 這樣的常見萬用字元,還支援像 等不常見的萬用字元,要使用這些不...

如何使用新單位rem

手機端需加上第一條,pc無視 1 需要先加上 手機端獲取物理裝置尺寸 1 2 viewport content width device width,minimum scale 1,maximum scale 5,user scalable no 獲取手機端物理裝置尺寸 2 先初始化頁面預設的字型大...