亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中em的正確打開方式詳解

  發(fā)布時(shí)間：2021-04-08 16:01:19   作者：恪愚   我要評(píng)論
這篇文章主要介紹了CSS中em的正確打開方式，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友可以參考下

為什么說“通常情況下1em=16px”？

用戶的瀏覽器默認(rèn)渲染的文字大小是“16px”，換句話說，Web頁面中“body”及其子元素的文字大小在用戶瀏覽器下默認(rèn)渲染是“16px”。
我們都知道：em（和 rem ）是一個(gè)相對(duì)單位！“相對(duì)”的意思是：

  • 相對(duì)的計(jì)算必然有一個(gè)參考物，那么這里相對(duì)所指的就是父元素的font-size。比如說：如果在一個(gè) div 設(shè)置字體大小為“16px”，此時(shí)這個(gè) div 的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進(jìn)行過顯示的設(shè)置。如果用戶通過瀏覽器的UI控件改變了文字的大小，那么我們整個(gè)頁面也會(huì)進(jìn)行放大（或縮?。恢劣谟脩舾淖兞藶g覽器的字體后會(huì)致使整個(gè)頁面崩潰！

只不過em是相對(duì)于父元素，而rem是相對(duì)于“根”元素（html）

em到底是怎樣的？

em：相對(duì)單位。其基準(zhǔn)值是當(dāng)前元素的字號(hào)大??；實(shí)際值則取決于它（繼承）的父元素。
經(jīng)過筆者查閱資料+不斷測(cè)試，這其中有一個(gè)“不為人注意的”公式：
目標(biāo)em值=目標(biāo)像素值/父元素像素值

（↑：em是如何與父元素 font-size 產(chǎn)生聯(lián)系的

<body>
	I'm <p>yunxiaomeng</p>.
</body>
body{
	font-size: 16px;
}
p{
	font-size: 1.2em;
}

test1
 

看到圖中的紅線框了么？p標(biāo)簽實(shí)際被渲染出的大?。繕?biāo)像素值）為：16(px) x 1.2=19.2(px)

這里還有一個(gè)要特別注意的地方：如果同一個(gè)元素的另一個(gè)選擇器/屬性用了一個(gè)不一樣的字號(hào)值（font-size）去覆蓋前一個(gè)值，這將會(huì)改變 em 在這個(gè)域下的基準(zhǔn)值！
比如，我們將上面的p中再加一個(gè)屬性：

p{
	font-size: 1.2em;
	padding: 1.2em;
}

那么 padding 的實(shí)際渲染值（目標(biāo)像素值）= 19.2(px) x 1.2 = 23.04(px)（即16 x 1.2 x 1.2）：
 

test2
 

這也是為什么你對(duì)每一層子元素都設(shè)置了 em 時(shí)其真正大小似乎并不是自己想要的！
（至于其中為什么有和font值一樣的margin，就要參考張?chǎng)涡瘛?a rel="external nofollow" target="_blank" >CSS世界》中提到的“幽靈空白元素”了！）

rem也是這樣的？！

rem也是一個(gè)相對(duì)單位，它是相對(duì)于root根元素變化的。
它的計(jì)算方式和 em 的大差不差。但是這里有一個(gè)“常見的誤區(qū)”：一般我們可以通過頁面寬度動(dòng)態(tài)更改根元素的 font-size 值來做響應(yīng)適配：

let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];
	
window.onresize=function () {
    htmlDom.style.fontSize=htmlWidth/20+'px';
};

但很多人會(huì)誤以為rem值是和“頁面大小對(duì)應(yīng)的”。其實(shí)這是錯(cuò)誤的！

而且目前來說完全可以通過css來做響應(yīng)式：
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); } 配合 媒體查詢 @media

到此這篇關(guān)于CSS中em的正確打開方式詳解的文章就介紹到這了,更多相關(guān)css打開em內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 解決ElementUI自定義CSS樣式不生效的問題

    這篇文章主要介紹了解決ElementUI自定義CSS樣式不生效的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-02-22

  • CSS3中的彈性布局em運(yùn)用入門詳解 1em等于多少像素

    這篇教程將引導(dǎo)大家如何使用em來創(chuàng)建一個(gè)基本的彈性布局，從而學(xué)習(xí)其如何計(jì)算？又是如何使用em對(duì)層進(jìn)行彈性擴(kuò)展？又是如何擴(kuò)展文本和圖像等內(nèi)容？下在我們就一起帶著這些問
    2021-02-08

  • CSS偽類:empty讓我眼前一亮(實(shí)例代碼)

    這篇文章主要介紹了CSS偽類:empty讓我眼前一亮，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-11-03

  • CSS使用BEM命名規(guī)范實(shí)踐

    這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-28

  • css 命名：BEM, scoped css, css modules 與 css-in-js詳解

    這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友
    2020-08-24

  • CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解

    這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-06-28

最新評(píng)論