CSS3的REM設置字體大小

時間 2020-06-28

標籤 css3 css rem 設置字體大小欄目 CSS 简体版

原文原文鏈接

　　在Web中使用什麼單位來定義頁面的字體大小，至今天爲止都還在激烈的爭論着，有人說PX作爲單位好，有人說EM優勢多，還有人在說百分比方便，以致於出現了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局。不幸的是，仍然有不一樣的利弊，使各類技術都不太理想，但又沒法不去用。真是進也難，退也難呀。
　　
　　最近在學習em的相關知識的時候，無心之間讓我拾得一寶，就是使用rem來設置Web頁面的字體大小。讓我一會兒就來勁了，一口氣看完並測試了一回，還真是爽歪歪的呀。師傅說好東西不能吃獨食，於我就在這裏給你們吹吹這個從沒見過的REM。
　　
　　在詳細介紹rem以前，咱們先一塊兒來回顧一下咱們經常使用的兩種記量單位，也是備受爭論的兩個：
　　
　　PX爲單位
　　
　　EM爲單位
　　
　　PX爲單位
　　
　　在Web頁面初期製做中，咱們都是使用「px」來設置咱們的文本，由於他比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，他改變了瀏覽器的字體大小，這時會使用咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了。所以，這時就提出了使用「em」來定義Web頁面的字體。
　　
　　em爲單位
　　
　　前面也說了，使用是「px」爲單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，咱們可使用「em」單位。Richard Rutter'在《How to size text using ems》一文中有作過詳細的介紹，追至早一點，Richard Rutter也在《How to Size Text in CSS》中進行過深刻的剖析。
　　
　　這種技術須要一個參考點，通常都是以<body>的「font-size」爲基準。好比說咱們使用「1em」等於「10px」來改變默認值「1em=16px」，這樣一來，咱們設置字體大小至關於「14px」時，只須要將其值設置爲「1.4em」。瀏覽器

body {
　　font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/
}
h1 {
　　font-size: 2.4em; /2.4em × 10 = 24px /
}
p {
　　font-size: 1.4em; /1.4em × 10 = 14px /
}
li {
　　font-size: 1.4em; /1.4 × ? = 14px ? /
}ide

　爲何"li"的"1.4em"是否是「14px」將是一個問號呢？若是你瞭解過「em」後，你會以爲這個問題是多問的。前面也簡單的介紹過一回，在使用「em」做單位時，必定須要知道其父元素的設置，由於「em」就是一個相對值，並且是一個相對於父元素的值，其真正的計算公式是：

 1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

這樣的狀況下「1.4em」能夠是「14px」,也能夠是「20px」，或者說是「24px」，總之是一個不肯定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用「1em」。這樣一來可能又不是咱們所須要的方法。佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。