美文网首页了不起的 WEB 前端
做 CSS 实现宽度和浏览器窗口宽度一样的正方形

做 CSS 实现宽度和浏览器窗口宽度一样的正方形

作者: 知行社 | 来源:发表于2018-06-08 18:56 被阅读26次

    方法1: 用 rem
    配合动态设置 html 根节点的 font-size 的 JS,使 浏览器窗口宽度 的值为 6.4rem;

    .tar {
        width:6.4rem;
        height:6.4rem;
    }
    

    方法2: 用 vw

    .tar {
        width: 100vw;
        height: 100vw;
    }
    

    方法3: 用 padding-top: 100%

    .tar {
        width: 100vw;
        padding-top: 100%;
    }
    

    padding-top 设置百分数是基于元素的宽度的。

    相关文章

      网友评论

        本文标题:做 CSS 实现宽度和浏览器窗口宽度一样的正方形

        本文链接:https://www.haomeiwen.com/subject/hwaasftx.html