css長度單位em,px,rem分別有什么用

這篇文章主要介紹css長度單位em,px,rem分別有什么用,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:國際域名空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、珠暉網(wǎng)站維護、網(wǎng)站推廣。

一、使用em或px來設(shè)置字體的大小

CSS從排版里繼承了單位pt(point)和pc(pica)。 傳統(tǒng)打印機上使用,并優(yōu)先于類似的單位cm或 in。在CSS中有理由不使用單位pt,可以使用你喜歡的任何單位。 我們一個很好的理由使用既不pt也沒有任何其他絕對單位(),那就是使用em和px。

這里有幾行不同的厚度。 它們中的一些或全部可能看起來很清晰,但至少1px和2px線應(yīng)該清晰可見:

css長度單位em,px,rem分別有什么用

如果前四行看起來都相同(或者如果缺少0.5pt線),你可能正在計算機顯示器上查看無法顯示小于1px的點。 如果線條的厚度增加,你可能會在高質(zhì)量的計算機屏幕或紙張上查看此頁面。 如果1pt看起來比1.5px厚,你可能有一個手持屏幕。

CSS的神奇單位:px,通常是一個很好的單位,特別是如果樣式需要文本與圖像對齊,或者只是因為1px寬或1px的倍數(shù)保證看起來很清晰。

但對于字體大小,它甚至更好用em。這個想法是(1)不設(shè)置BODY元素的字體大?。ㄓ肏TML格式),而是使用設(shè)備的默認大小,因為這是讀者可以舒適閱讀的大小; (2)表示其他元素的字體大小em:H1 {font-size: 2.5em}使H1為普通正文字體的2?倍。

在這里你可以使用的唯一的地方pt(或cm或in)用于設(shè)置字體大小是在樣式表打印,如果你需要確保印刷字體是完全具有一定規(guī)模。但即使使用默認字體大小通常更好。

因為,px單位可以防止你知道設(shè)備的分辨率。 無論輸出是96dpi,100dpi,220dpi還是1800dpi,它都整數(shù)px長度來表示,總是看起來很好并且在所有設(shè)備上非常相似。 但是,如果你想知道設(shè)備的分辨率,例如,知道使用0.5px線是否安全,該怎么辦? 答案是通過媒體查詢檢查分辨率。 解釋媒體查詢超出了本文的范圍,但這是一個小例子:

div.mybox {
   border:2px solid;
}
@media(min-resolution:2dppx){
  / *每px有2個或更多點的介質(zhì)* /
  div.mybox {
     border:1.5px solid;
  }
}

二、css的新增單位:rem

為了更容易編寫僅依賴于默認字體大小的樣式規(guī)則,CSS自2013年起就有了一個新的單位:rem。 rem(對于“root em”)是文檔根元素的字體大小。與em元素的區(qū)別在于,rem在整個文檔中是不變的。 例如,為p和h2元素提供相同的左邊距,比較2013年之前的樣式表:

p {margin-left:1em}
h2 {font-size:3em; margin-left:0.333em}

新版本:

p {margin-left:1rem}
h2 {font-size:3em; margin-left:1rem}

css還有其他一些新單位,可以指定相對于閱讀器窗口的大小,這就是vw和vh。vw是窗口寬度的1/100,vh是窗口高度的1/100。還有vmin,代表vw和vh中最小的。vmax,代表vw和vh中最大的。

因為它們是如此新穎,它們還沒有辦法在任何地方使用。但是,截至2015年初,一些瀏覽器已經(jīng)可以支持它們了。

以上是“css長度單位em,px,rem分別有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

當前名稱:css長度單位em,px,rem分別有什么用
本文URL:http://muchs.cn/article44/pdhdee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)自適應(yīng)網(wǎng)站、網(wǎng)站排名、Google品牌網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)