css3中新的字型單位rem
前段時間無意中在wordpress主題中接觸到一種字型單位rem,當時我就很好奇,畢竟以前沒有見過,於是我馬上查詢資料,並測試了一回.
眾所周知在web中有很多字型單位(font-size)較常見的有em,px,讓我們對比一下這兩種單位:
px是絕對值,準確而穩定.但是它的改變會影響頁面布局.
em是相對值,它以父元素的大小為基準單位,來計算大小.所以很難把握.
考慮到這麼多字型單位的優缺點,在css3中rem誕生了.rem也是相對單位(rem=root em)很明顯rem是由em變化而來,或者說rem是em的公升級版,具體來歷.我們就不要去追究了,從字型表面上看,它就是這麼回事.
root em,就是相對於根目錄的em而不是相對于父元素,也就是說,它雖然是絕對值,但是只是相對於根目錄來說也就是html,它不會隨著其它元素的改變而改變.也就是說,我們只要設定html的文字大小就可以了.而不用考慮其它因素.
而且他還具有非常好的支援chrome,firefox,safari,opera,ie9+.ie6,7,8就只能使用px或者em了.
xml/html code複製內容到剪貼簿
為什麼要這麼設定呢?因為網頁上的字型預設是16px,而16px的62程式設計客棧.5%就是10px;也就是說這樣的活1rem就等於10px,這個對於我們來說是非常棒的,font-size:1.2rem,當然為了相容ie的低階版本還要寫font-size:12px,別忘了要寫在rwww.cppcns.comem的前面.
在這裡我要提到一點的就是,假如你要是用rem來設定行高,邊距之類的單位.請在html中加入這麼一句話:-webkit-text-size-adjust:none;來消除webkit的預設屬性.否則在其它的地方程式設計客棧rem不是以根目錄作為基準值了.
canvas無法使用rem單位的解決方案
我們在使用canvas時需要設定畫布的大小，即設定canvas標籤的width，height屬性。
xml/html code複製內容到剪貼簿
在移動端，畫布的大小要根據螢幕的大小進行適配，我們一程式設計客棧般採用rem結合**查詢的方式。使用canvas時就遇到遇到一些問題：
canvas的width屬性不支援rem單位(如果使用樣式當然支援rem，但注意canvas的width屬性與style中的width是有區別的)，如下
css code複製內容到剪貼簿
translate方法傳參是座標位置，不帶單位，如ctx.translate(10,10);
適配螢幕是必須的，但如何解決？用最原始的百分比布局就可以：
j**ascript code複製內容到剪貼簿
本文標題: 輕鬆掌握css3中的字型大小單位rem的使用方法
本文位址:
css3 中的尺寸單位
1 em 它是我們常用的，經常用在字的大小上。它是大小是相對於父級的大小。1em 父級px 2 百分比 指的是相對於父級的，在定義標籤的width時會用 3 rem 它是em的增強版，ie9 它相對於根html來設定大小。不會像em，依賴於父級大小。一般都是 html 原因 頁面預設的大小是16px...
CSS3 中的取值和單位
在 css3 中增加了很多度量的單位和取值，下面是專案開發中常用到的單位和取值。1.長度值單位 h1 如果視口的寬度是200mm，那麼上述 中h1元素的字型大小將為16mm，即 8x200 100。h1 如果視口的寬度是300mm，高度是200mm，那麼上述 中h1元素的字型大小將為24mm，即 8...
CSS3中輕鬆實現漸變效果
漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。background image moz linear gradient top,8fa1ff,3757fa firefox background image webkit gradient lin...