解析CSS单位px、em、rem、vh、vw、vmin、vmax来实现页面的布局
程序员文章站
2022-04-08 18:29:21
...
1、px：绝对单位，页面按精确像素展示.
2、em：相对单位，浏览器文本的默认字号的相对关键字,通常是16px
3、rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算.
实例如下图
<head><style>body{font-size: 20px;}h1:first-of-type{font-size: 1em;}h1:last-of-type{font-size: 1rem;}</style></head><body><h1>em样式</h1><h1>rem样式</h1></body>
4、 vw、vh、vmin、vmax 主要用于页面视口大小布局
| 单位 | 说明 |
|---|---|
| vw：viewpoint width | 视窗宽度，1vw等于可视窗口宽度的1% |
| vh：viewpoint height | 视窗高度，1vh等于可视窗口高度的1% |
| vmin | vw和vh中较小的那个 |
| vmax | vw和vh中较大的那个 |
实例如下图
em,rem,vh,vw都是相对大小，不是绝对大小。
em是相对于父元素的字体大小，rem是相对于根元素(html)的字体大小。
vh是相对于视口高度的大小,vw是相对于视口的宽度大小。
如果用户使用的是移动设备，可以根据竖屏横屏来调整当前页面，可以使用vmax,vmin。相对于rem;em在页面布局上更加方便简单