網頁文字單位-pt、px、%、em、rem

閱讀時間約 1 分鐘
網頁的文字單位大致上分成: pt、px、%、em、rem
pt、px為最常見的,屬於絕對單位;%、em、rem則為相對單位。

%單位的算法:

預設網頁上的文字大小為16px=12pt,
假如設定font-size: 75%,意思就是將預設文字大小改成:16 X 0.75=12px
假如設定font-size: 0.75em,意思就是將預設文字大小改成:16 X 0.75=12px

那麼em、rem看起來很像的兩者,又有什麼差異呢?

em是以父元素為基準的文字單位,適合使用在限制區塊的內容,例如:ul li、p、div等等,em可以快速地從父元素改變內容文字的大小。
rem的文字則是以根元素為基準,而根元素就是指標籤。適合用在整體網頁的尺寸切換,可以依據不同的螢幕尺寸,統一改變網頁全部的文字大小。
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
夜走之後才發現我們還有些許匱乏。一種綿長而不停歇的移動,從不需轉乘和路線圖的思索,我們就只是回家。往那個最必要最索求的終點前進,然後再由終點發展出另一個終點,像是一種遲不驟止的命運。我們持續綿長的行走,一切需索都不會停止。
Thumbnail
這陣子一直在練習做PPT,趕著做青創計畫的書審資料(最近在忙的事情,後面會寫文章分享),花了好多時間研究它的操作方式。因為工作上,幾乎不太會使用到簡報,但基本的操作大概知道一些。 從四月開始一直到五月初,小本邊做邊學習,不斷地砍掉重練、反反覆覆地練習。這一個多月下來,學到了幾個新招式,有實際操...
Thumbnail
在browser裏,想查的英文單字用mouse移到該單字上,單指重壓”觸控式軌跡板”後,自動出現該單字的解釋,簡單好用。
Thumbnail
落葉的凋零 迎來盛開的花季 人也是一樣 因為離別 才有了新的相遇
Thumbnail
如果遊玩Hylics2時卡關,或者有看不懂的劇情,這裡可以回答您大多數的問題。
Thumbnail
無以名狀的憂慮 突如其來的確幸 無常的我們的人生 只要你看開一點
Thumbnail
在美國有些地方找錯地址,按錯電鈴,都有可能讓你陷於生死關頭。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
夜走之後才發現我們還有些許匱乏。一種綿長而不停歇的移動,從不需轉乘和路線圖的思索,我們就只是回家。往那個最必要最索求的終點前進,然後再由終點發展出另一個終點,像是一種遲不驟止的命運。我們持續綿長的行走,一切需索都不會停止。
Thumbnail
這陣子一直在練習做PPT,趕著做青創計畫的書審資料(最近在忙的事情,後面會寫文章分享),花了好多時間研究它的操作方式。因為工作上,幾乎不太會使用到簡報,但基本的操作大概知道一些。 從四月開始一直到五月初,小本邊做邊學習,不斷地砍掉重練、反反覆覆地練習。這一個多月下來,學到了幾個新招式,有實際操...
Thumbnail
在browser裏,想查的英文單字用mouse移到該單字上,單指重壓”觸控式軌跡板”後,自動出現該單字的解釋,簡單好用。
Thumbnail
落葉的凋零 迎來盛開的花季 人也是一樣 因為離別 才有了新的相遇
Thumbnail
如果遊玩Hylics2時卡關,或者有看不懂的劇情,這裡可以回答您大多數的問題。
Thumbnail
無以名狀的憂慮 突如其來的確幸 無常的我們的人生 只要你看開一點
Thumbnail
在美國有些地方找錯地址,按錯電鈴,都有可能讓你陷於生死關頭。