淺談CSS中的尺寸單位

瀏覽器的兼容性越來越好,移動(dòng)端基本是清一色的webkit,經(jīng)常會(huì)用到css的不同尺寸/長(zhǎng)度單位,這里做個(gè)整理。
概覽
絕對(duì)單位
- px: Pixel 像素
- pt: Points 磅
- pc: Picas 派卡
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 厘米
- q: Quarter millimeters 1/4毫米
相對(duì)單位
- %: 百分比
- em: Element meter 根據(jù)文檔字體計(jì)算尺寸
- rem: Root element meter 根據(jù)根文檔( body/html )字體計(jì)算尺寸
- ex: 文檔字符“x”的高度
- ch: 文檔數(shù)字“0”的的寬度
- vh: View height 可視范圍高度
- vw: View width 可視范圍寬度
- vmin: View min 可視范圍的寬度或高度中較小的那個(gè)尺寸
- vmax: View max 可視范圍的寬度或高度中較大的那個(gè)尺寸
運(yùn)算
calc: 四則運(yùn)算
實(shí)例:
h1 { width: calc(100% - 10px + 2rem); }
單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細(xì)
絕對(duì)單位
px - Pixel 像素
像素 px 相對(duì)于設(shè)備顯示器屏幕分辨率而言。
div { font-size: 12px } p { text-indent: 24px }
pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt } p { height: 100pt }
pc Picas 派卡
十二點(diǎn)活字(印刷中使用的),相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸。
div { font-size: 10pc } p { height: 10pc }
in Inches 英寸
div { font-size: 10in } p { height: 10in }
mm Millimeter 毫米
div { font-size: 10mm } p { height: 10mm }
cm Centimeter 厘米
div { font-size: 10cm } p { height: 10cm }
q Quarter millimeters 1/4毫米
div { font-size: 20q } p { height: 100q }
相對(duì)單位
% 百分比
相對(duì)于父元素寬度
<body> <div class="parent"> <div class="children"></div> </div> </body> <style> .parent { width: 100px } .children { width: 66.6% } /* children的寬度為 66.6px */ </style>
em Element meter 根據(jù)文檔計(jì)算尺寸
相對(duì)于當(dāng)前文檔對(duì)象內(nèi)文本的字體尺寸而言,若未指定字體大小則繼承自上級(jí)元素,以此類推,直至 body,若 body 未指定則為瀏覽器默認(rèn)大小。
<body> <div class="element"></div> </body> <style> body { font-size: 14px; } .element { font-size: 16px; width: 2em; /* 2em === 32px */ } </style>
rem Root element meter 根據(jù)根文檔( body/html )字體計(jì)算尺寸
相對(duì)于根文檔對(duì)象( body/html )內(nèi)文本的字體尺寸而言,若未指定字體大小則繼承為瀏覽器默認(rèn)字體大小。
<body> <div class="element"></div> </body> <style> body { font-size: 14px; } .element { font-size: 16px; width: 2rem; /* 2rem === 28px */ } </style>
ex 文檔字符“x”的高度
相對(duì)于字符“x”的高度,通常為字體高度的一半,若未指定字體尺寸,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
至于為啥是x,我TM也不知道。
<body> <div class="x"></div> </body> <style> .x { height: 1ex; overflow: hidden; background: #aaa; } </style>
ch 文檔數(shù)字“0”的的寬度
同上,相對(duì)于數(shù)字“0”的寬度。
<body> <h1>定義一個(gè)寬度正好能裝下10個(gè)0的容器:</h1> <div class="0">0000000000</div> </body> <style> .0 { width: 10ch; overflow: hidden; background: #ccc; } </style>
一張圖解釋:
vh View height / vw View Width - 可視范圍
相對(duì)于可視范圍的高度和寬度,可視范圍被均分為 100 單位的 vh/vw;可視范圍是指屏幕可見范圍,不是父元素的,百分比是相對(duì)于包含它的最近的父元素的高度和寬度。
假設(shè)設(shè)備可視范圍為高度 900px,寬度 750px,則,1 vh = 900px/100 = 9px,1vw = 750px/100 = 7.5px。
<body> <h1>article title</h1> <div class="element"></div> <div class="full-height"></div> </body> <style> .element { width: 50vw; height: 80vh; /* 如果屏幕高度為1000px,則該元素高度為800px,vw 同理 */ } .full-height { height: 100vh; /* 輕易實(shí)現(xiàn)了與屏幕同等高度的元素 */ } h1 { width: 100vw; /* 設(shè)置一個(gè)和屏幕同寬的標(biāo)題,標(biāo)題的字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放,以達(dá)到字體和viewport大小同步的效果。 */ } </style>
vmin / vmax 可視范圍的寬度或高度中較小/較大的那個(gè)尺寸
假設(shè)瀏覽器的寬度設(shè)置為 1200px,高度設(shè)置為 800px, 則1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。
如果寬度設(shè)置為 600px,高度設(shè)置為 1080px, 則1vmin = 6px, 1vmax = 10.8px。
假設(shè)需要讓一個(gè)元素始終在屏幕上可見:
.box { height: 100vmin; width: 100vmin; }
假設(shè)需要讓這個(gè)元素始終鋪滿整個(gè)視口的可見區(qū)域:
.box { height: 100vmax; width: 100vmax; }
總結(jié)
em、rem 是實(shí)際生產(chǎn)中我們最常用到的單位,可以使用其配合媒體查詢改變 body 字體大小來實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì),vh、vw、vmin、vmax也可以很方便地幫助我們控制響應(yīng)尺寸,但實(shí)際的可控性可能不如前者,具體按照我們的業(yè)務(wù)需求去實(shí)踐吧!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了CSS Media媒體查詢,通過不同的媒介類型和瀏覽器兼容,媒體查詢中寬高比,語法,邏輯操作等詳細(xì)介紹了開發(fā)中需要使用媒體查詢來平衡布局的代碼操作,需要的朋2017-08-15
使用CSS3中的calc()屬性來以算式表達(dá)尺寸數(shù)值
calc()的用法十分巧妙,可以像我們?cè)趯W(xué)校做數(shù)學(xué)應(yīng)用題那樣列式子來計(jì)算長(zhǎng)度寬度等值,從而一定程度上實(shí)現(xiàn)自適應(yīng)布局,下面我們就來介紹如何使用CSS3中的calc()屬性來以算式表2016-06-06CSS3對(duì)背景圖片的裁剪及尺寸和位置的設(shè)定方法
這篇文章主要介紹了CSS3對(duì)背景圖片的裁剪及尺寸和位置的設(shè)定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下2016-03-07通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧簡(jiǎn)介
這篇文章主要介紹了通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27- 這篇文章主要介紹了CSS中的字體尺寸設(shè)置,包括CSS3中新引入的單位的使用,超級(jí)推薦!需要的朋友可以參考下2015-07-21
CSS實(shí)現(xiàn)背景圖尺寸不隨瀏覽器縮放而變化的兩種方法
一些網(wǎng)站的首頁背景圖尺寸不隨瀏覽器縮放而變化,本例使用CSS 實(shí)現(xiàn)背景圖尺寸不隨瀏覽器縮放而變化,方法一. 把圖片作為background,方法二使用img標(biāo)簽。喜歡的朋友可以看2014-09-21- background-size是css3提供的一個(gè)新特性,它可以讓你隨心所欲的控制背景圖片的大小。下面我們來一步步看看這個(gè)新特性都有什么值得我們驚艷的地方2014-09-02
純CSS無表達(dá)式實(shí)現(xiàn)未知尺寸圖片等比縮放(支持IE7及以上)
一些未知尺寸的圖片放在一個(gè)固定寬高的容器中,給圖片設(shè)置固定的寬高可能導(dǎo)致圖片變形,用JavaScript來解決在圖片長(zhǎng)寬差距較大時(shí)還是會(huì)出現(xiàn)圖片變形的情況,在不考慮IE6的2013-10-17- CSS3背景尺寸Background-size,這個(gè)屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小,下面為大家詳細(xì)介紹下其語法、瀏覽器兼容及使用示例,感興趣的朋友2013-10-14
- 不同的瀏覽器對(duì)margin、padding、height、width 等屬性的解釋有很大的偏差。有時(shí)我們發(fā)現(xiàn)同樣的兩列布局,在不同的瀏覽器中兩列長(zhǎng)短不一,類似的情況太多了,如此困擾大家2011-01-18