浅谈em、rem、vh、vw
- em是浏览器文本的默认字号的相对关键字,大多数浏览器em通常默认是16px；
- em是个相对长度单位，这个单位表示元素的 font-size 的计算值，继承父级元素的字号大小；
- rem这个单位代表根元素（通常为
<html> 元素）的 font-size 大小，相对固定一些，根元素的字号大小不变时，它可以看成一个常量； - 定义边框大小不能用em或者rem，要用px。
html{ /* 设置根元素字号大小 */ font-size: 10px;}/* 直接使用"rem"来引用定义字号或其它属性 */div{ /*此时 3rem : 3 * 10px = 30px; */ font-size: 3rem; width: 20em;/*宽度为 20 *30px = 600px*/ height: 20em; background-color: red;}
响应式按钮应用
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式按钮</title> <style> html{ /* 设置根元素字号大小 */ font-size: 10px; } .btn{ /* 设置按钮背景颜色 */ background-color: lightgreen; /* 按钮字体颜色设定 */ color: coral; /* 去掉边框 */ border:none; /* 去掉单击轮廓线 */ outline: none; /* 内边距 */ padding: 0.5rem 1rem; border-radius: 0.3rem; } /* 鼠标移上悬停效果 */ .btn:hover{ /* 透明度 */ opacity: 0.8; /* 将鼠标设置为手型 */ cursor: pointer; /* 阴影效果 */ box-shadow: 0 0 3px #888; /* 阴影效果延时 */ transition: 0.3s; } .small{ font-size: 1rem; } .normal{ font-size: 2rem; } .larger{ font-size: 3rem; } </style> </head> <body> <button class="btn larger">Button</button> <button class="btn normal">Button</button> <button class="btn small">Button</button> </body>
- vh、vw 视口百分比长度定义相对于文档的可见部分大小的值。
- vh是视口的初始包含块高度的 1%;
- vw是视口的初始包含块宽度的 1%；
- vh、vw在移动端布局使用最多；
- vmin和vmax可以用来指定视口高度 vw 和宽度 vh 两者之间的最小值和最大值。
div{ width: 80vw; /*宽度的80%*/ height: 100vh;/*高度的100%*/ background-color: cyan;}
/*使用vmin或vmax，可得到正方形*/div{ width: 80vmin; height: 80vmin; background-color: cyan;}
- 总结：
em,rem,vh,vw都是相对值，不是绝对值；
- em是相对于父元素的字体大小，
- rem是相对于根元素的字体大小，
- vh是相对于视口高度的百分比,
- vw是相对于视口的宽度百分比，
- vmax限定元素的视口宽度和高度的最大值，
- vmin限定元素的视口宽度和高度的最小值。
