CSS度量单位rem、em、vw、vh详解
CSS度量单位rem、em、vw、vh详解
单位 | 说明 | 兼容性 |
---|---|---|
em | 相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化 | 良好 |
rem | 相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响 | IE9+、火狐 3.6+、 safari5.0+ |
vw | 相对于视口的宽度, 视口被均分为 100 单位的vw | 高版本浏览器均支持 |
vh | 相对于视口的宽度, 视口被均分为 100 单位的vh | 高版本浏览器均支持 |
1、em
相当于“ 倍” ,比如设置当前的 div 字体大小为 1.5em,则当前的 div 的字
体大小为:当前 div 继承的字体大小*1.5 倍。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div{font-size:20px;} .p{font-size:2em;} .span{font-size:0.5em;} </style> <div class="div">div 标签中的文字大小为 20px <p class="p">P 标签中的文字大小为 2em <span class="span">span标签中的文字大小为0.5em</span> </p> </div> |
效果:
说明:
单位 em 是随着父元素大小的变化而变化,div 是 p 的父元素,p 是
span 的父元素,所以 p 标签的大小受制于 div 标签,span 标签的大小受制
于 p 标签,不受制于 div 标签。
div 标签的字体大小是 20px,p 标签的大小是 40px,span 标签的字体大小
是 20px
2、rem
这里的 r 是 root 的意思,就是相对于根节点来进行缩放,如果有嵌套的关
系,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> html{font-size:16px;} .div{font-size:30px;background-color:pink;padding:50px;} .p{font-size:1rem;} .span{font-size:0.5rem;} </style> <div class="div">div 标签中的文字大小为 30px <p class="p">P 标签中的文字大小为 1rem <span class="span">span 标 签 中 的 文 字 大 小 为 0.5rem</span> </p> </div> |
效果:
说明:
rem 单位是根据根节点的大小来设置的,也就是根据 html 的大小来
设置的,跟父元素没有关系,所以 p 标签的字体大小是 16px,span 标签的
字体大小是 8px。
3、vw 和 vh
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于
屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的
话 vh 单位更好。
代码:
1 2 3 4 5 6 7 |
<style> body{background-color:orange;} .p{width:50vw;height:50vh;background-color:pink;fontsize:3em;} </style> <p class="p">P 标签的宽度为 50vw</p> |
效果:
说明:
1 个 vw 相当于页面宽度的 1%,比如页面宽度是 1000px,那么 1vw
就是 10px,vh 同理。
P 标签的宽度是 50vw,所以就是页面宽度的 50%,高度是 50vh,所以就
是页面高度的 50%。
4、vmin 和 vmax
关于视口高度和宽度两者的最小值或者最大值。
比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。
有一个元素,你需要让它始终在屏幕上可见:
1 2 3 4 5 |
.box { height: 100vmin; width: 100vmin; } |
如果你要让这个元素始终铺满整个视口的可见区域:
1 2 3 4 5 |
.box { height: 100vmax; width: 100vmax; } |
CSS度量单位rem、em、vw、vh详解
单位 | 说明 | 兼容性 |
---|---|---|
em | 相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化 | 良好 |
rem | 相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响 | IE9+、火狐 3.6+、 safari5.0+ |
vw | 相对于视口的宽度, 视口被均分为 100 单位的vw | 高版本浏览器均支持 |
vh | 相对于视口的宽度, 视口被均分为 100 单位的vh | 高版本浏览器均支持 |
1、em
相当于“ 倍” ,比如设置当前的 div 字体大小为 1.5em,则当前的 div 的字
体大小为:当前 div 继承的字体大小*1.5 倍。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div{font-size:20px;} .p{font-size:2em;} .span{font-size:0.5em;} </style> <div class="div">div 标签中的文字大小为 20px <p class="p">P 标签中的文字大小为 2em <span class="span">span标签中的文字大小为0.5em</span> </p> </div> |
效果:
说明:
单位 em 是随着父元素大小的变化而变化,div 是 p 的父元素,p 是
span 的父元素,所以 p 标签的大小受制于 div 标签,span 标签的大小受制
于 p 标签,不受制于 div 标签。
div 标签的字体大小是 20px,p 标签的大小是 40px,span 标签的字体大小
是 20px
2、rem
这里的 r 是 root 的意思,就是相对于根节点来进行缩放,如果有嵌套的关
系,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> html{font-size:16px;} .div{font-size:30px;background-color:pink;padding:50px;} .p{font-size:1rem;} .span{font-size:0.5rem;} </style> <div class="div">div 标签中的文字大小为 30px <p class="p">P 标签中的文字大小为 1rem <span class="span">span 标 签 中 的 文 字 大 小 为 0.5rem</span> </p> </div> |
效果:
说明:
rem 单位是根据根节点的大小来设置的,也就是根据 html 的大小来
设置的,跟父元素没有关系,所以 p 标签的字体大小是 16px,span 标签的
字体大小是 8px。
3、vw 和 vh
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于
屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的
话 vh 单位更好。
代码:
1 2 3 4 5 6 7 |
<style> body{background-color:orange;} .p{width:50vw;height:50vh;background-color:pink;fontsize:3em;} </style> <p class="p">P 标签的宽度为 50vw</p> |
效果:
说明:
1 个 vw 相当于页面宽度的 1%,比如页面宽度是 1000px,那么 1vw
就是 10px,vh 同理。
P 标签的宽度是 50vw,所以就是页面宽度的 50%,高度是 50vh,所以就
是页面高度的 50%。
4、vmin 和 vmax
关于视口高度和宽度两者的最小值或者最大值。
比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。
有一个元素,你需要让它始终在屏幕上可见:
1 2 3 4 5 |
.box { height: 100vmin; width: 100vmin; } |
如果你要让这个元素始终铺满整个视口的可见区域:
1 2 3 4 5 |
.box { height: 100vmax; width: 100vmax; } |