I.移动端常用的单位比较
①px:像素大小,固定值
②%:百分比
③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位)
④rem(移动端主流):相对根节点(html)的font大小
⑤vw(视口宽度):相对视口宽度比例,1vw相当于视口宽度的百分之一
⑥vh(视口高度):相对视口高度比例,1vh相当于视口高度的百分之一
II.代码实现
源码:
<!--
* @Description:
* @Version: 2.0
* @Autor: Zzelcerton
* @Date: 2020-08-15 08:42:13
* @LastEditors: Zzelcerton
* @LastEditTime: 2020-08-15 09:25:42
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端单位比较</title>
<style>
/*px/%/em/rem/vw/vh*/
.banner1{
font-size: 2px;
}
.banner2{
font-size: 2%;
}
.banner3{
font-size: 2rem;
}
.banner4{
font-size: 2vw;
}
.banner5{
font-size: 2vh;
}
#content1{
width:20px;
height: 20px;
background: red;
}
#content2{
width:20%;
height: 20%;
background: yellow;
}
#content3{
width:20rem;
height: 20rem;
background: blue;
}
#content4{
width:20vw;
height: 20vw;
background: green;
}
#content5{
width:20vh;
height: 20vh;
background: turquoise;
}
</style>
</head>
<body>
<section >
<div class="banner1"><p>1</p></div>
<div class="banner2"><p>2</p></div>
<div class="banner3"><p>3</p></div>
<div class="banner4"><p>4</p></div>
<div class="banner5"><p>5</p></div>
</section>
<section>
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="content5"></div>
</section>
</body>
</html>
效果: