em vem的应用场景

em和vem 的应用场景

em 是font-size 的倍数
1em 在没有设置字体的时候浏览器默认是 16px;
当文本里面使用 font-size 时 1em 就等于 font-size 的值
em 设置响应式的文本字号
font-size 是允许被继承
可以设置响应式盒模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8>
        <title>em的应用</title>
        <style>
            html{
                font-size:20px;
            }
            /*现在的h2字体的大小是 30px*/
            h2{
                font-size:1.5em;
            }
            div{
                /*现在盒子的大小是 宽200px*高400px*/
                width:10em;
                height:20em;
            }
            div{
            /*现在的盒子大小是 宽400px*高800ox*/
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <h2>你好php</h2>
        <div></div>
    </body>
</html>

按钮的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮</title>
    <style>
        /* 基本样式 */
        .btn{
            background-color: blue;
            color:#fff;
            border:none;
            outline: none;
            padding: 0.5em 1em;
            /* 圆角 */
            border-radius: 0.2em;
        }
        .btn:hover{
            /* 透明度 */
            opacity:0.8 ;
            /* 将鼠标设置为手型 */
            cursor: pointer;
            box-shadow: 0 0 3px #888;
            transition: 0.3s;
        }
        /* 如果想设置三个不同的大小按钮，只需要为这个三个按钮指定不同的自号就可以了 */
        /* 较小的 */
        .small{
            font-size: 10px;
        }
        /* 正常的 */
        .normal{
            font-size: 16px;
        }
        /* 较大的 */
        .lar{
            font-size:20px;
        }
    </style>
</head>
<body>
    <button class="btn small">button</button>
    <button class="btn nomal">button</button>
    <button class="btn lar">button</button>
</body>
</html>

em定义字号

em具有动态性和继承性
rem 是固定值的 em
rem 是根元素的字号大小
边框不能用em

<!DOCTYPE html>
<html>
    <head>
        <meta chaset="utf-8>
        <title>rem的应用</title>
        <style>
            html是最顶级元素
            html{
        /*在字体大小是32px */
                font-size:2em;
            }
            h2{
            /*字体大小是1.5*32=48px*/
                font-size:1.5em
            }
            span{
            /*字体大小是32px*/
                font-size:2rem;
            }
        </style>
    </head>
    <body>
    <h2>你好 php<span>中文网</span></h2>
    </body>
</html>

vh 视口化的高度 1/100
vw 视口化的宽度 1/100

em和vem 的应用场景

按钮的案例

em定义字号

相关文章