px、em、rem、百分比的区别

文章目录

1. 单位类型与相对基准
2. 相对长度
- 1.em
- 2.rem
- 3.%百分比
- 4.vw 和 vh
- 5.vmin 和 vmax
- 6.vm
- 7.ch
- 8. ex
3. 总结

1. 单位类型与相对基准

单位名称	单位类型（相对/绝对）	相对基准
px	相对	屏幕像素缩放后的尺寸
百分比	相对	font-size相对于继承，width相对与父元素
em	相对	相对于本元素的font-size
rem	相对	根元素

2. 相对长度

1.em

相对于所在容器的font-size属性，若自身没有设置font-size属性，则相对于浏览器的默认字体尺寸。

相当于“ 倍” ，比如设置当前的 div 字体大小为 1.5em，则当前的 div 的字

体大小为：当前 div 继承的字体大小*1.5 倍。

可以指定到小数点后三位，比如“1.234em”

一般浏览器默认字体大小是16px, 则1em = 16px, 2em = 32px

如果用户通过浏览器的UI控件（缩放页面）改变了文字的大小，那么我们整个页面也会进行放大（或缩小）。兼容性：良好

示例：
在浏览器中输出3种字体大小的文字，展示em的作用。

DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>体验emtitle>

        <style>