em和rem
- em的特点
- em的值不是固定的，具有继承性；
- em继承于父类元素font-size字体大小；
- rem的特点
- rem根据html根元素计算
- 如果html根元素没有定义，则根据浏览器默认值16px计算
em和rem的区别
- rem跟随根元素改动而改动;em跟随父元素改动而改动
代码效果如下图：<style>body {font-size: 1.5em;}h2 {font-size: 1.8em;}span {font-size: 1.2em;}li {font-size: 1.2rem;}</style></head><body><!-- 根元素body: 1.5*16px= 24px ; h2:1.8*24px=43.2px; span:1.2*43.2px=51.84px --><h2>这里是h2元素<span> 这里是span元素 </span></h2><p>这里是P元素</p><!-- li元素:1.2*16px=19.2px --><li>这里是li元素</li></body>
- rem跟随根元素改动而改动;em跟随父元素改动而改动
em和rem的应用场景
- 一般定义子元素的font-size值用rem；其他元素可以用em
vh和vw
vw是相对视口的宽度而定的，长度等于视口宽度的1/100
例如视口宽度是900px，那1vw=9px
vh是相对视口的高度而定的，长度等于视口高度的1/100
例如视口高度是500px，那1vh=5px
vmin和vmax
vmin：取当前Vw和Vh中较小的那一个值
<style>div {width: 80vmin;height: 80vmin;background-color: lightcoral;}</style></head><body><div></div></body>
代码如图：
vmax：取当前Vw和Vh中较大的那一个值
<style>div {width: 80vmax;height: 80vmax;background-color: lightcoral;}</style></head><body><div></div></body>
代码如图：
