css基础学习（rem / em /vh/ vw的原理与应用场景）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em</title>
    <style>
        .btn
        {
            background-color: aqua;
            color:rgb(60, 63, 63);
            border: none;
            padding: 0.5em 1em;
            outline: none;
            border-radius: 0.3em;
        }
        .btn:hover
        {
            /* 透明度 */
            opacity: 0.8;
            /* 将鼠标设置为手型 */
            cursor: pointer;
            /* 阴影效果 */
            box-shadow: 0 0 5px red;
            /* 延时体现效果 */
            transition: 0.2s;
        }
        /* 改变按钮不同大小可通过改变其字号即可，可通过px定义，也可以用em */
        .small
        {
            font-size: 0.7em;
        }
        .normal
        {
            font-size: 1em;
        }
        .big
        {
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <!-- 
        em是用户代理的值，可以响应式的设置盒模型的属性，以达到不同屏幕显示不同大小的目的。 
        用户代理默认值为1em，换算为px通常为16px；可通过设置祖先元素字体大小更改em的大小，例如：设置html的font-size：20px，则1em等于20px；
    -->
    <button class="btn small">button</button>
    <button class="btn normal">button</button>
    <button class="btn big">button</button>
    <!-- rem为固定ban的em，不会随自身和祖先元素的字号变化而变化 -->
    <!-- vw为可视窗口的初始包含块宽度的百分之一； -->
    <!-- vh为视口的初始化包含块高度的百分之一； -->
    <!-- 初始化包含块可简单理解为html -->
    <!-- 宽高以vmin、vmin为单位时，将以较小尺寸为主，以vmax/vmax为单位时将以较大尺寸为主 -->
</body>
</html>
相关文章
