共427字，讀完需 5 分鐘。本文為《破解前端面試（80% 應(yīng)聘者不及格系列）》肤舞，包含 px紫新、em、rem李剖∶⒙剩可能有同學(xué)會(huì)問(wèn)有什么好聊的，不就是尺寸單位的各種操作么篙顺？布局是網(wǎng)頁(yè)構(gòu)建的基石偶芍，熟練掌握各種操作、知曉可能的問(wèn)題德玫、熟悉優(yōu)化手段匪蟀，才能做到在工程實(shí)踐中從容不迫。
(寫(xiě)在文前的只言片語(yǔ)宰僧、意書(shū)情殤)長(zhǎng)歌破曉穿云過(guò),響徹碧霄振九天.)------Jason Zhang
web開(kāi)發(fā)已現(xiàn)世多年,技術(shù)成熟且學(xué)習(xí)平臺(tái)廣泛,筆者針對(duì)其中細(xì)節(jié)從本質(zhì)上進(jìn)行解釋.力求透徹.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>rem</title>
<style type="text/css">
/* 筆試和面試巢谋耄考,要求必會(huì)!!*/
/ *px em rem都是尺寸單位,可以用來(lái)賦值字號(hào)和寬高定位置*/
/*默認(rèn)狀態(tài)下 1rem=16px */
/*em計(jì)算參照父級(jí)font-size屬性值,
*rem參照html的font-size屬性值*/
/*為了方便計(jì)算,通常將html的font-size屬性設(shè)置為100px*/
html{
font-size: 100px;
}
#a{
width: 100px;
height: 2rem;
font-size: .2em;
border: 1px solid black;
}
#b{
width: 2.5rem;// 2.5*100
height: 1.5em;// 1.5*20
font-size: .3rem;// .3*100
border: 1px solid black;
}
@media only screen and (min-width: 640px) and (max-width: 960px) {
html{
font-size: 200px;
}
}
/*rem布局:
* rem作為單位配合媒體查詢(xún) 實(shí)現(xiàn)響應(yīng)式網(wǎng)站
* 在移動(dòng)端屏幕適配時(shí)應(yīng)用廣泛
* */
</style>
</head>
<body>
<div id="a">
<div id="b">乾坎艮震巽離坤兌</div>
</div>
</body>
</html>
