第二个效果怎么没有？

来源：3-29 项目作业

要每天学习的小蓝同学

2021-08-26 18:41:18

相关代码：

 <style>
        /* 第一种 */
        * {
            margin: 0;
            padding: 0;
        }

        .box-box {
            display: flex;
            flex-direction: column;
            margin: 30px auto;
            align-items: center;
        }

        .box {
            border: 1px solid #000;
            margin: 10px 0;
        }

        .box1 {
            width: 20vw;
            height: 20vw;
        }

        /* 第二种 */
        .box2 {
            width: 20%;
        }

    .box3 {
        width: 3.7rem;
        height: 3.7rem;
    }
    </style>
</head>

<body>
    <div class="box-box">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
    </div>

    <script>
        // 第二种
        const box2 = document.getElementById('box2');
        window.onresize = function () {
            let vw = document.documentElement.clientWidth || window.innerWidth;
            box2.style.height = vw * 0.2 + 'px';
        }

        // 第三种
        setRem();
        window.onresize=setRem;
        function setRem(){
            const docEL=document.documentElement;
            const viewWidth=docEL.clientWidth ||window.innerWidth;

            docEL.style.fontSize=viewWidth/375*20+'px';
        }
    </script>

还有一个问题就是对rem的理解。我在css设置了宽高都是3.7rem。

docEL.style.fontSize=viewWidth/375*20+'px';

这一句是获得1rem的px值吗？因为rem是继承html的。

写回答

1回答

好帮手慕久久

2021-08-27

已采纳

同学你好，解答如下：

1、第二种方法没有效果，是因为没有选中box2：

修改如下：

还可以优化一下：

2、docEL.style.fontSize=viewWidth/375*20+'px'是用来计算1rem等于多少px。rem是根据html的font-size计算的，即html这个元素的font-size是多少，1rem就等于多少，例如：

不要说“继承”，就是规定好的。

祝学习愉快！

0 学习 · 15276 问题

查看课程

相似问题

老师，我写的效果对不对

回答 2

老师看下代码，有没有需要改的地方

回答 1

【第17周移动基础 01 移动开发入门】3-11 换行布局。这两行代码效果一样，是对的吗？

回答 1

这个题目，我还是不明白

回答 1

按钮设置了没有反应怎么处理

回答 1

打开慕课网App查看更多内容