溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html中長(zhǎng)度如何表示

發(fā)布時(shí)間:2020-09-26 15:18:42 來(lái)源:億速云 閱讀:133 作者:小新 欄目:web開(kāi)發(fā)

這篇文章主要介紹了html中長(zhǎng)度如何表示,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

其實(shí)css中的長(zhǎng)度單位一共有8個(gè),分別是px,em,pt,ex,pc,in,mm,cm;

px:像素(Pixel),相對(duì)于設(shè)備的長(zhǎng)度單位,像素是相對(duì)于顯示器屏幕分辨率而言的。譬如,WONDOWS的用戶所使用的分辨率一般是96像素/英寸。而MAC的用戶所使用的分辨率一般是72像素/英寸。
em:相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
ex:相對(duì)長(zhǎng)度單位。相對(duì)于字符“x”的高度。此高度通常為字體尺寸的一半。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
pt:點(diǎn)(Point),絕對(duì)長(zhǎng)度單位。
pc:派卡(Pica),絕對(duì)長(zhǎng)度單位。相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸。
in:英寸(Inch),絕對(duì)長(zhǎng)度單位。
mm:毫米(Millimeter),絕對(duì)長(zhǎng)度單位。
cm:厘米(Centimeter),絕對(duì)長(zhǎng)度單位。

其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ;

容器的大小我們經(jīng)常用px做單位,大家都沒(méi)什么異議,字體大?。╢ont-size)很多國(guó)內(nèi)的人使用px做單位,其實(shí)用px做字體單位唯一的致命缺點(diǎn)就是在IE下無(wú)法用瀏覽器字體縮放的功能?;蛘咭郧暗陌醋trl+滾動(dòng)鼠標(biāo)的中間的滾輪。

所以多人建議使用html em單位,對(duì)于用慣了px的人用em肯定不是很方便,這里提供一些轉(zhuǎn)換公式和對(duì)照表供大家參考:

px to em:Example: 12px / 16px = .75em
px to %:Example: 12px / 16px * 100 = 75%
px to pt:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
em to px:Example: .75em * 16px = 12px
em to %:Example: .75em * 100 = 75%
% to px:Example: 75 * 16px / 100 = 12px
% to em:Example: 75 / 100 = .75em
pt to px:Example: 12pt * 96ppi / 72ppi = 16px

PixelsEMsPercentPoints
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

最后pCSS5推薦使用PX像素為單位布局網(wǎng)頁(yè):

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享html中長(zhǎng)度如何表示內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI