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

    文章目录

    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>