作业内容

作业标题：1217作业
作业内容：
按自己理解的方式详细描述em,rem的原理与应用场景，并实例演示
分析 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>1217作业</title>
    <style>
        /* html默认的大小应该是16px = 1em */
        /* 我们这里重新定义 根元素的 1em等于 16*1.25=20 */
        /* 此时 其他元素的 1em=20px */
        html{
            font-size:1.25em;
        }
        /* h1的默认fontsize是2个em。在devtool里面我们可以看到 h1 font-size=2em， computed里面显示等于40px */
        /* h2默认1.5em 此时是30px */
        /* 此时我们定义字体大小等于1rem。 而rem是相对于根元素定义的rem来作为单位的 */
        /* 此时观察 我们发现，h2的字体大小仅有1rem = 20px = 我们定义的根元素的em */
        h2{
            font-size: 1rem;
        }
        /* 创建一个box容器 示例演示 */
        .box{
            width: 5rem;
            height: 5rem;
        }
        /* 如果屏幕宽度小于500px 那么 我们重新定义根元素 1rem = 32px */
        @media screen and (min-width: 500px) {
            html{
                font-size: 2rem;
            }
            .box{
                background-color: red;
            }
        }
        /* 如果屏幕宽度小于800px 那么 我们重新定义根元素 1rem = 32px */
        @media screen and (min-width: 800px) {
            html{
                font-size: 3rem;
            }
            .box{
                background-color: green;
            }
        }
        /* 如果屏幕宽度小于1000px 那么 我们重新定义根元素 1rem = 32px */
        @media screen and (min-width: 1000px) {
            html{
                font-size: 4rem;
            }
            .box{
                background-color: yellow;
            }
        }
        .box2{
            width: 50vmin;
            height: 50vmin;
            background-color: #000;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1>城南花开</h1>
    <h2>www.gzj2001.com</h2>
    <span>em与rem在响应式布局里面更有优势，通过不同的设备尺寸查询，仅修改em即可完成多界面适配</span>
    <br>
    <span>vh /vw 将 用户看到区域划分为100份，保证用户不同大小所看到的内容不失真</span>
    <br>
    <span>在不同尺寸中，rem和em等会改变用户主观感知的相对比例大小，而vh vx 始终都是那个百分比</span>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>
em rem vh vw与响应式布局

作业内容

作业代码

相关文章
