浅析 em 和 rem

em 和 rem 都是相对长度单位
em 是相对于父级元素的font-size 大写来定义自身的大小
rem 是相对于根节点(html{}, body{}, :root{})font-size来定义大小

Talk is cheap, show me the code !(空谈无用,上代码)

em

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>em demotitle>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*
            1. 浏览器默认的字体大小是 16px,所以 1em = 16px
            2. 使用 em 时如果嵌套的子元素过多,而且子元素会继承父元素的 font-size 属性,
               使得的计算起来比较繁琐, 先检查自身有没有 font-size属性,如果有则使用自身的,
            3. 如果没有,则查看父级元素的 font-size值
            4. 因此不推荐使用 em,替代方案是 rem (root element)
            */
            .div {
                width: 20em;
                height: 20em;
                font-size: 20px;
                background-color: skyblue;
                margin: 0 auto;
                margin-top: 15px;
            }
            .div1 {
                /*如果自身没有 font-size这个属性,则使用父级的font-size属性值*/
                width: 15em; 
                height: 15em;
                background-color: lightblue;
            }   
            .div2 {
                /*如果自身有 font-size这个属性,则使用自身的属性值*/
                font-size: 10px;
                width: 10em;
                height: 10em;
                background-color: lightgreen;
            }
            .div3 {
                /*div3 自身没有 font-size属性,则使用父级 div2 的 font-size值*/
                width: 8em;
                height: 8em;
                background-color: lightpink;
            }
        style>
    head>
    <body>
        <div class="div">我是 div
            <div class="div1">我是 div1
                <div class="div2">我是 div2
                    <div class="div3">我是 div3
                    div>
                div>
            div>
        div>
    body>
html>

rem

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>rem demotitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
            :root {
                font-size: 30px;
            }
            html {
                font-size: 50px;
            } 
        */
        /*
            1. 浏览器默认的字体大小是 16px,所以 1rem = 16px
            2. :root{} 就等同于 html{},总之,是根元素
            3. 因此不推荐使用 em,替代方案是 rem (root element)
            4. 1rem = 16px
        */
        html {
            font-size: 20px;
        }
        .div {
            width: 20rem;
            height: 20rem;
            background-color: lightblue;
        }
        .div1 {
            width: 15rem;
            height: 15rem;
            background-color: lightgreen;
        }
        .div2 {
            width: 160px;
            height: 160px;
            font-size: 16px;
            background-color: lightgray;
        }
    style>
head>
<body>
    <div class="div">我是 div 元素div>
    <div class="div1">我是 div1 元素div>
    <div class="div2">我是 div2 元素div>
body>
html>

em和rem

你可能感兴趣的:(em-rem,css,html,css3)