共427字，读完需 5 分钟。本文为《破解前端面试（80% 应聘者不及格系列）》，包含 px、em、rem。可能有同学会问有什么好聊的，不就是尺寸单位的各种操作么？布局是网页构建的基石，熟练掌握各种操作、知晓可能的问题、熟悉优化手段，才能做到在工程实践中从容不迫。
(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>rem</title>
<style type="text/css">
/* 笔试和面试常考,要求必会!!*/
/ *px em rem都是尺寸单位,可以用来赋值字号和宽高定位置*/
/*默认状态下 1rem=16px */
/*em计算参照父级font-size属性值,
*rem参照html的font-size属性值*/
/*为了方便计算,通常将html的font-size属性设置为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作为单位配合媒体查询 实现响应式网站
* 在移动端屏幕适配时应用广泛
* */
</style>
</head>
<body>
<div id="a">
<div id="b">乾坎艮震巽离坤兑</div>
</div>
</body>
</html>
网友评论