一.em单位:相对单位,相对于父级大小.
<div class="fs">
你看看我的字体大小
<div class="fs">
你在看看我的字体大小
</div>
</div>
css样式:
body {
font-size: 12px;
}
.fs {
width: 5em;
height: 5em;
font-size: 2em;
background-color: red;
}
div .fs {
background-color: pink;
}效果:
父级的大小是子级的一半
二.rem：绝对单位，都是相对于基准值(html标签的font-size的值大小);
代码:
<html lang="en" style="font-size:24px;">
<div>
我的字体大小
<div class="fs">
我的字体大小2
<div class="fs">
我的字体大小3
</div>
</div>
</div>
css样式:
.fs {
font-size: 2rem;
}效果:
字体第一行没有设置.自己大小.按照我们在html中设置的为24.下面两个都为24*2rem=48px;
三.vh和vw
vw:viewpoint width，视窗宽度，1vw=视窗宽度的1%;如果100vw相当于浏览器视窗宽度的100%;
vh:viewpoint height，视窗高度，1vh=视窗高度的1%;如果100vh相当于浏览器视窗高度的100%;
html代码:
<div class="one"></div>
<div class="two"></div>
css样式:
*{
margin:;
padding:;
}
.one{
width: 100vw;
height: 50vh;
background-color: red;
}
.two{
width: 100vw;
height: 50vh;
background-color: pink;
}效果:
四:vmin和vmax
vmin:vw和vh中较小的那个值。
vmax:vw和vh中较大的那个值。
例如:如果浏览器宽1000高800那么1vmin=8,1vmax=10;
如果浏览器宽700高1100那么1vmin=7,1vmax=11;
ie不支持vmax!!!
代码:
<style>
* {
margin:;
padding:;
}
.one {
width: 10vmin;
height: 10vmin;
background-color: red;
}
.two {
width: 10vmax;
height: 10vmax;
background-color: pink;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
效果: