如何在移動端寬度自適應實現正方型？

時間 2019-12-05

標籤如何移動寬度自適應實現正方欄目無線简体版

原文原文鏈接

前言

在移動端如何讓寬度自適應來實現一個正方形，也就是寬度設置爲百分比。javascript

方法一：

使用javascript/jquerycss

<style>
     .wrap { 
　　　　　width: 100%; 
　　　　　background: thistle;
　　　} .child { 
　　　　　background: teal; 
　　　　　width: 20%; 
　　　} </style>

<body>
     <div class="wrap">
           <div class="child">111</div>
     </div>
</body>
<script src="wjs/lib/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(window).on('resize', function () {
            $('child').css('height',$('li').css('width'));
        }).trigger('resize');
    })
</script>

效果圖：html

方法二：

將元素垂直方向的一個padding，也就是padding-bottom或者padding-top設置爲和寬度相同的百分比，將盒子撐起來，java

padding-bottom用法：jquery

可是padding是不包含盒子內容的，因此咱們把盒子高度設置爲0，不然文字會溢出，致使高度大於寬度。this

能夠看出來在正方形中有內容的時候，內容會在正方形外面，這是由於默認文字是從左到右，從上到下的排列因此paddin-bottom之後文字會在正方形上面spa

<style>
     .wrap { 
　　　　　width: 100%; 
　　　　　background: thistle;
　　　}
     .child {  
　　　　　background: teal; 
　　　　　width: 20%; 
　　　　　padding-bottom: 20%;
　　　　　height: 0;
　　　}
</style>
<div class="wrap">
     <div class="child">
          1111
     </div>
</div>

效果圖：.net

padding-top用法：code

一樣須要設置height:0，能夠看出來在正方形中有內容的時候，內容會在正方形外面，這是由於默認文字是從左到右，從上到下的排列因此paddin-top之後文字會在正方形下方（外面）htm

<style>
     .wrap { 
　　　　　width: 100%; 
　　　　　background: thistle;
　　　}
     .child {  
　　　　　background: teal; 
　　　　　width: 40%; 　　　　　padding-top: 40%; 　　　　　height: 0;
　　　}
</style>
<div class="wrap">
     <div class="child">
          1111
     </div>
</div>

效果圖：

方法三：

利用雙層嵌套來寫，將外層的div的position設置relative，內層的position設置爲absoult，利用絕對定位消除空間佔用
分別看設置成padding-top／padding-bottom的效果

padding-bottom：

<style>
.wrap{
    padding-bottom:50%; height: 0;
    background:thistle;
    width: 50%; position: relative;
}
.child{
    position: absolute;
 width: 100%; height: 100%; 
} 
</style>
<div class="wrap">
    <div class="child">
        111
    </div>
</div>

效果圖：

padding-top：

<style>
.wrap{
    padding-top:50%; height: 0;
    background:thistle;
    width: 50%; position: relative;
}
.child{
    position: absolute; width: 100%; height: 100%; 
} 
</style>
<div class="wrap">
    <div class="child">
        111
    </div>
</div>

效果圖：

運行以後咱們發現寫padding-top仍是不能夠，咱們來檢查代碼發現，在寫內層的div時候沒有給top，left的值，讓咱們把top，left加上再看看

.child{
    position: absolute;
    width: 100%;
    height: 100%; 
    left: 0;
    top: 0;
}

效果圖：

注：因此若是用padding-top的時候必定要記得添加top，left

方法四：

使用 vw/vh 單位，可是須要注意的是vw/vh單位是將當前視口的寬度/高度平均分紅100份的長度，並不是父級盒子，1vw = 1% viewport width。

<style>
        html,body {
            width: 100%; 
            height: 100%;
        }
        .wrap { 
            background: thistle;
        }
        .child {
            background: teal; 
            width: 50%; height: 50vw;
        }
</style>
<body>
    <div class="wrap">
        <div class="child">
            1111
        </div>
    </div>
</body>