美文网首页让前端飞简友广场程序员
【前端基础4.0】如何做一个自适应的方块

【前端基础4.0】如何做一个自适应的方块

作者: hijackli | 来源:发表于2019-03-24 20:38 被阅读65次

    文/Jack同学

    现在响应式布局越来越重要,适应多终端多设备要求也越来越多。自适应元素在开发过程中经常碰到,下面写一个常用到的自适应方块的写法。

    我们在开发过程中经常使用百分比来自适应元素。
    • 请看结构:
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
    
    • 接着样式:
            html,body {
                width:100%;
                height: 100%;
            }
            .wrapper {
                width: 100%;
                height: 100%;
            }
            .box {
                width: 30%;
                height: 30%;
                border: 1px solid red;
            }
    
    • 这样我们得到如图:
    不是方块

    -由于设备的宽高不定,设置百分比显然得不到想要的方形,如果固定宽高又达不到自适应的要求。

    • 下面这个方法可以解决这个问题。
        html,body {
            width:100%;
            height: 100%;
        }
        .wrapper {
            width: 100%;
            height: 100%;
        }
        .box {
            width: 30%;
            height: 0;
            padding-top: 30%;
            border: 1px solid red;
        }
    
    • 如图:


      自适应方块
    • 上面我把元素的height设置为0,padding-top设置为30%,从而得到想要的,为什么呢?难道padding-top是相对于自身宽度来设置的吗?

    • 其实原因确实是相对与宽度设置的,但不过是相对于父级的宽度设置的,所以子级的横向和纵向距离永远相等,并且设置的是百分比,也同样自适应。

    • 这样一个自适应方块就完成了,同样的给元素设置border-radius: 50%;也会得到一个自适应圆。

    相关文章

      网友评论

        本文标题:【前端基础4.0】如何做一个自适应的方块

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