一.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: 0; padding: 0; } .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: 0; padding: 0; } .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>
效果:
