css中em px 區(qū)別你真的了解嗎

2022-09-19 06:12

2個回答
px是絕對單位,不支持IE的縮放,em是相對單位。
em指字體高,任意瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font -size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10,然后換上em作為單位就行了。em有如下特點:
1. em的值并不是固定的;
2. em會繼承父級元素的字體大小。
重寫步驟:
1. body選擇器中聲明Font-size:62.5%;
2. 將你的原來的px數(shù)值除以10,然后換上em作為單位;
簡單吧,如果只需要以上兩步就能解決問題的話,可能就沒人用px了。經(jīng)過以上兩步,你會發(fā)現(xiàn)你的網(wǎng)站字體大得出乎想象。因為em的值不固定,又會繼承父級 元素的大小,你可能會在content這個div里把字體大小設(shè)為1.2em, 也就是12px。然后你又把選擇器p的字體大小也設(shè)為1.2em,但如果p屬于content的子級的話,p的字體大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。這是因為content的字體大小被設(shè)為1.2em,這個em值繼承其父級元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作為其子級,em則繼承content的字體高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明,也就是避免以上提到的1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#main中聲明了字體大小為1.2em,那么在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px。
詭異的12px漢字
在完成em轉(zhuǎn)換時還會發(fā)現(xiàn)一個詭異的現(xiàn)象,就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小,而 是稍大一點。這個問題我已經(jīng)解決,你只需在body選擇器中把62.5%換成63%就能正常顯示了。
一般都是px em很少用
相關(guān)問答
css字體中px和em的區(qū)別
1個回答2022-09-16 19:58
px是像素,em則是大寫字母M的寬度。英文字體是有等寬字體和比例字體之分的,等寬字體的每個字符的寬度是相同的,而比例字體則不同,M的寬度要比i寬很多,因此在不同字體下,1em的實際寬度是不盡相同的。
Css單位中px、em和rem的區(qū)別?
2個回答2022-09-23 04:24
1)px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一 個虛擬長度單位,是計算機系統(tǒng)的數(shù)字化圖像長度單位。 2)em 是相對長度單位,相對于當(dāng)前對象內(nèi)文本的字體尺寸...
全文
Css單位中px、em和rem的區(qū)別
1個回答2022-09-18 04:10
1)px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一 個虛擬長度單位,是計算機系統(tǒng)的數(shù)字化圖像長度單位。 2)em 是相對長度單位,相對于當(dāng)前對象內(nèi)文本的字體尺寸...
全文
前端css中單位em和px的區(qū)別
1個回答2022-09-14 07:21
相對和絕對的區(qū)別, 1em=16px; 一個按百分比,一個寫死,。不同設(shè)備顯示樣式不同的差異,所以自適應(yīng)網(wǎng)頁,用百分比,em單位. 打個比方吧; 你設(shè)寬度600px時; F12調(diào)試可以明顯看到蘋果6和...
全文
關(guān)于css中單位 em和px的問題
4個回答2022-07-01 10:12
最大的div的寬度用px,你只須給body的字體寫上font-size=63%;即可。如果要滿屏顯示,最大div就是100%。
徹底弄懂css中單位px和em,rem的區(qū)別
2個回答2023-03-13 14:37
px就是像素值,em就是根據(jù)基準(zhǔn)來縮放字體的大小。em是相對于父元素的屬性而計算的,Rem是相對于根元素
CSS里的em這個單位,老是搞不懂怎么算出來的
1個回答2023-03-18 19:20
em單位名稱為相對長度單位 rem單位名稱為相對root長度單位 rem才是基于根節(jié)點來算的 em是當(dāng)前的父級對象的值來算的 .1=0.1 1e3=1000
請問下Dreamweaver8中 在CSS面板中 font-size 18px 這里的px在里面有沒有具體的什么定義
2個回答2023-01-07 13:19
px只是像素,只決定字體的大小,這個是固定的。 所以沒有具體定義。要想改變字體的高度寬度只能通過字體。 如果是表格之類的高度寬度。那就是width:*px ...
全文
em是什么簡寫
1個回答2023-05-23 23:11
我其實也不太懂
有人用過卡西歐 PX-A100嗎?能不能介紹一下呀
1個回答2024-08-23 11:47
不要期望太高,否則失望越大!