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

資訊專(zhuān)欄INFORMATION COLUMN

如何更愉快地使用rem —— 別說(shuō)你懂CSS相對(duì)單位

Snailclimb / 2717人閱讀

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

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

《別說(shuō)你懂CSS相對(duì)單位》系列譯文:

如何更愉快地使用em

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

視口相關(guān)單位的應(yīng)用

無(wú)單位數(shù)字和行高

CSS自定義屬性

本文對(duì)應(yīng)的章節(jié)目錄:

2.2 em和rem

2.2.2 對(duì)font-size使用rem

可用性:對(duì)font-size使用相對(duì)長(zhǎng)度單位

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

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

2.3.3 讓這個(gè)面板變得“響應(yīng)式”

2.3.3 調(diào)整單個(gè)組件的大小

2.2 em和rem 2.2.2 對(duì)font-size使用rem

當(dāng)瀏覽器解析HTML文檔時(shí),創(chuàng)建了一個(gè)用來(lái)代表頁(yè)面元素的集合,叫做DOM(文檔對(duì)象模型,Document Object Model)。樹(shù)狀結(jié)構(gòu),每一個(gè)節(jié)點(diǎn)代表一個(gè)元素。就是頂層節(jié)點(diǎn)(根節(jié)點(diǎn)),在下面的是它的子節(jié)點(diǎn),再往下就是它們的子節(jié)點(diǎn),還有后代節(jié)點(diǎn),如此類(lèi)推。

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

rem是根em(root em)的縮寫(xiě)。rem是和根元素關(guān)聯(lián)的,不依賴(lài)當(dāng)前元素。不管你在文檔中的什么地方使用這個(gè)單位,1.2rem的計(jì)算值是相等的,等于1.2倍的根元素的字號(hào)大小。下面的示例代碼中,聲明了根元素的字號(hào)大小,并在嵌套的無(wú)序列表中使用rem聲明字號(hào)大小。

[ 代碼片段 2.10 使用rem聲明字號(hào)大小 ]

:root {                    1
  font-size: 1em;          2
}

ul {
  font-size: .8rem;
}

1 偽類(lèi) :root 等價(jià)于 html 選擇器

2 使用瀏覽器的默認(rèn)字號(hào)大小(16px)

在這個(gè)示例里,根字號(hào)大小是瀏覽器的默認(rèn)大小16px(根元素的1em等于瀏覽器的默認(rèn)字號(hào)大小)。無(wú)序列表的字號(hào)大小為0.8rem,計(jì)算結(jié)果是12.8px。因?yàn)檫@只跟根元素相關(guān),盡管你在列表里嵌套了列表,嵌套子列表的字號(hào)仍然保持不變。

可用性:對(duì)font-size使用相對(duì)長(zhǎng)度單位

一些瀏覽器會(huì)提供給用戶(hù)2種方式定制文字的大小:縮放和設(shè)置一個(gè)默認(rèn)的字號(hào)大小。通過(guò)按Ctrl+或者Ctrl-,用戶(hù)可以對(duì)頁(yè)面進(jìn)行縮放。這在視覺(jué)上會(huì)把整個(gè)頁(yè)面的文字或圖片(其實(shí)是所有元素)都放大或縮小了。在一些瀏覽器,這個(gè)改變只針對(duì)當(dāng)前的標(biāo)簽頁(yè)且是臨時(shí)的,不會(huì)影響到新開(kāi)的標(biāo)簽頁(yè)。

設(shè)置默認(rèn)字號(hào)大小,會(huì)有點(diǎn)不一樣。不僅僅是設(shè)置的入口比較難找(一般在瀏覽器的設(shè)置頁(yè)),而且這個(gè)設(shè)置是永久的,直到用戶(hù)把默認(rèn)值還原。值得注意的是,這個(gè)設(shè)置對(duì)使用px或其他絕對(duì)單位定義的字號(hào)大小無(wú)效。因?yàn)槟J(rèn)字號(hào)大小對(duì)一些用戶(hù)是必要的,尤其是弱視的群體,你應(yīng)該用相對(duì)單位或百分比來(lái)定義字號(hào)的大小。

rem簡(jiǎn)化了很多em帶來(lái)的復(fù)雜度。事實(shí)上,rem提供了一個(gè)在px和em間的相對(duì)單位折中解決方案,而且更易于使用。那么,是不是意味著你應(yīng)該在對(duì)所有元素都使用rem,去掉其他長(zhǎng)度單位呢?當(dāng)然不是。

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

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

提示  

當(dāng)你不確定的時(shí)候,對(duì)font-size使用rem,對(duì)border使用px,以及對(duì)其他大多數(shù)屬性使用em。

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

把頁(yè)面的根元素字號(hào)大小定義為0.625em或者62.5%,在最近幾年來(lái),這樣的用法很常見(jiàn),這是一種模式,或者更貼切地說(shuō),這是一種反模式。

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

html {
  font-size: .625em;
}

我并不推薦這種用法。這個(gè)用法把瀏覽器默認(rèn)的字號(hào)大小16px縮小到10px。這樣做的好處是簡(jiǎn)化了計(jì)算,如果設(shè)計(jì)師告訴你字號(hào)大小應(yīng)該是14px,那你可以很輕易地計(jì)算出1.4rem,畢竟我們還是在使用相對(duì)單位。

一開(kāi)始,這看起來(lái)很方便,但事實(shí)上這樣的實(shí)現(xiàn)方式有兩個(gè)問(wèn)題。第一,強(qiáng)制你寫(xiě)了很多重復(fù)的樣式代碼。10px對(duì)于大多數(shù)文本來(lái)說(shuō)太小了,你需要在整個(gè)頁(yè)面中,來(lái)來(lái)回回地覆蓋它。你會(huì)發(fā)現(xiàn),自己把一段段落(

)的字號(hào)大小聲明為1.4rem,然后又把導(dǎo)航(

相關(guān)文章

  • 無(wú)單位數(shù)字和行高 —— 別說(shuō)你懂CSS相對(duì)單位

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

    Airmusic 評(píng)論0 收藏0
  • 視口相關(guān)單位的應(yīng)用 —— 別說(shuō)你懂CSS相對(duì)單位

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

    lbool 評(píng)論0 收藏0
  • 如何愉快使用em —— 別說(shuō)你懂CSS相對(duì)單位

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

    gekylin 評(píng)論0 收藏0
  • CSS自定義屬性 —— 別說(shuō)你懂CSS相對(duì)單位

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

    JinB 評(píng)論0 收藏0
  • 不知道層疊,別說(shuō)你懂CSS

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

    izhuhaodev 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<