国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何更愉快地使用rem —— 別說你懂CSS相對單位

Snailclimb / 2731人閱讀

摘要:值得注意的是,這個設置對使用或其他絕對單位定義的字號大小無效。事實上,提供了一個在和間的相對單位折中解決方案,而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板,加到你的頁面吧。

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》,其中的第二章《Working with relative units》,書中對relative units的講解和舉例可以說相當全面,看完之后發現自己并不太懂CSS相對單位,也希望分享給大家,所以有了這個譯文系列。(若有勘誤或翻譯建議,歡迎 Github PR ^_^

《別說你懂CSS相對單位》系列譯文:

如何更愉快地使用em

如何更愉快地使用rem [本文]

視口相關單位的應用

無單位數字和行高

CSS自定義屬性

本文對應的章節目錄:

2.2 em和rem

2.2.2 對font-size使用rem

可用性:對font-size使用相對長度單位

2.3 停止使用像素思維去思考

2.3.1 設置一個合理的字號默認值

2.3.3 讓這個面板變得“響應式”

2.3.3 調整單個組件的大小

2.2 em和rem 2.2.2 對font-size使用rem

當瀏覽器解析HTML文檔時,創建了一個用來代表頁面元素的集合,叫做DOM(文檔對象模型,Document Object Model)。樹狀結構,每一個節點代表一個元素。就是頂層節點(根節點),在下面的是它的子節點,再往下就是它們的子節點,還有后代節點,如此類推。

根節點是文檔里所有其他元素的祖先。它有一個特別的偽類(pseudo-class)選擇器(:root),在樣式表里可以用這個選擇器表示。使用帶類名的類型選擇器html,或者直接用標簽選擇器,效果是一樣的。

rem是根em(root em)的縮寫。rem是和根元素關聯的,不依賴當前元素。不管你在文檔中的什么地方使用這個單位,1.2rem的計算值是相等的,等于1.2倍的根元素的字號大小。下面的示例代碼中,聲明了根元素的字號大小,并在嵌套的無序列表中使用rem聲明字號大小。

[ 代碼片段 2.10 使用rem聲明字號大小 ]

</>復制代碼

  1. :root { 1
  2. font-size: 1em; 2
  3. }
  4. ul {
  5. font-size: .8rem;
  6. }

1 偽類 :root 等價于 html 選擇器

2 使用瀏覽器的默認字號大小(16px)

在這個示例里,根字號大小是瀏覽器的默認大小16px(根元素的1em等于瀏覽器的默認字號大小)。無序列表的字號大小為0.8rem,計算結果是12.8px。因為這只跟根元素相關,盡管你在列表里嵌套了列表,嵌套子列表的字號仍然保持不變。

</>復制代碼

  1. 可用性:對font-size使用相對長度單位
  2. 一些瀏覽器會提供給用戶2種方式定制文字的大小:縮放和設置一個默認的字號大小。通過按Ctrl+或者Ctrl-,用戶可以對頁面進行縮放。這在視覺上會把整個頁面的文字或圖片(其實是所有元素)都放大或縮小了。在一些瀏覽器,這個改變只針對當前的標簽頁且是臨時的,不會影響到新開的標簽頁。

  3. 設置默認字號大小,會有點不一樣。不僅僅是設置的入口比較難找(一般在瀏覽器的設置頁),而且這個設置是永久的,直到用戶把默認值還原。值得注意的是,這個設置對使用px或其他絕對單位定義的字號大小無效。因為默認字號大小對一些用戶是必要的,尤其是弱視的群體,你應該用相對單位或百分比來定義字號的大小。

rem簡化了很多em帶來的復雜度。事實上,rem提供了一個在px和em間的相對單位折中解決方案,而且更易于使用。那么,是不是意味著你應該在對所有元素都使用rem,去掉其他長度單位呢?當然不是。

在CSS的世界里,這個答案通常是,看情況。rem只是你的工具箱中的其中一個。掌握CSS很重要的一點,就是學會分辨在什么場景下該使用什么工具。我的選擇是,對font-size使用rem,對border使用px,對其他的度量方式如paddingmarginborder-radius等使用em。然而在必要時,需要聲明容器的寬度的話,我更喜歡使用百分比。

這樣,字號大小就變得可預測,而當其他因素影響到元素的字號大小時,你也可以借助em去縮放元素的padding和margin。在border上使用像素是很合適的,尤其當你想要一根漂亮的線的時候。以上就是我對不同屬性使用不同單位的理想方案,不過我要再次聲明,這些都是工具,在某些特定場景下,利用不同的工具可能取到更好的效果。

</>復制代碼

  1. 提示

    當你不確定的時候,對font-size使用rem,對border使用px,以及對其他大多數屬性使用em。

2.3 停止使用像素思維去思考

把頁面的根元素字號大小定義為0.625em或者62.5%,在最近幾年來,這樣的用法很常見,這是一種模式,或者更貼切地說,這是一種反模式。

[ 代碼片段 2.11 反模式:全局地把font-size定義為10px ]

</>復制代碼

  1. html {
  2. font-size: .625em;
  3. }

我并不推薦這種用法。這個用法把瀏覽器默認的字號大小16px縮小到10px。這樣做的好處是簡化了計算,如果設計師告訴你字號大小應該是14px,那你可以很輕易地計算出1.4rem,畢竟我們還是在使用相對單位。

一開始,這看起來很方便,但事實上這樣的實現方式有兩個問題。第一,強制你寫了很多重復的樣式代碼。10px對于大多數文本來說太小了,你需要在整個頁面中,來來回回地覆蓋它。你會發現,自己把一段段落(

)的字號大小聲明為1.4rem,然后又把導航(

相關文章

  • 單位數字和行高 —— 別說你懂CSS相對單位

    摘要:無單位數字和行高有一些屬性可以接收不帶單位的數值意思就是一個不帶長度單位的數字,如和等于,等于,如此類推。警告不帶單位的只可以表示長度單位和百分比的值,譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》,其中的第二章《Working with relative units》,書中對relative ...

    Airmusic 評論0 收藏0
  • 視口相關單位的應用 —— 別說你懂CSS相對單位

    摘要:還有視口相關單位,依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關單位的話,在這里簡單介紹一下。筆記視口相關單位對于大多數瀏覽器還是一項比較新的特性,所以當你試圖把這個特性和其他樣式混搭時,有可能會有一些很奇怪的。 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》,其中的第二章《Working with relative units》,書中對rel...

    lbool 評論0 收藏0
  • 如何愉快使用em —— 別說你懂CSS相對單位

    摘要:相對單位的值會根據外部影響因素的變化而變化。很自然,相對單位使用起來會比較困難。在本章中,我將揭開相對單位的神秘面紗。重點來了,使用相對單位聲明的值會由瀏覽器轉化為一個絕對值,我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》,其中的第二章《W...

    gekylin 評論0 收藏0
  • CSS自定義屬性 —— 別說你懂CSS相對單位

    摘要:前段時間試譯了的好書,其中的第二章,書中對的講解和舉例可以說相當全面,看完之后發現自己并不太懂相對單位,也希望分享給大家,所以有了這個譯文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》,其中的第二章《Working with r...

    JinB 評論0 收藏0
  • 不知道層疊,別說你懂CSS

    摘要:知道存在是很有用的,這樣當你在別人的代碼中遇到它時,你就知道它是什么了。如上面所示的示例所示,元素選擇器具有很低的特殊性。類選擇器具有更高特殊性,所以將戰勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。 在實際的工作中,我們可能還有些疑惑,當有多個選擇器作用在一個元素上時,哪個規則最終會應用到元素上?其實這是通過層疊機制來控制的,這也和樣式繼承(元素從其父元...

    izhuhaodev 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<