阿莹yes
阿莹yes

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>