CSS中的響應式2列正方形

我正在嘗試創建一個響應式頁面，其中正方形佔用全寬度的50％（每行2個方格）。在移動（包括iPhone 6/7加），這些廣場應該是一個接一個，但下這就是它沒有用下面的代碼工作：CSS中的響應式2列正方形

.square { 
    width: 100vw; 
    height: 100vw; 
    float: left; 
} 

@media (min-width: 1170px) { 
    .square {width: 50vw; height: 50vw; } 
}

理想情況下，我會用引導，但我想不出如何創建廣場。

來源

2017-04-05 titibouboul

你有沒有設置'HTML，身體{保證金：0}'？ – LGSon

是的 - 我認爲這與智能手機的「設備 - 像素比率」有關，它使得寬度obselete的使用 – titibouboul

不，它實際上是基於視口單元不排除滾動條的事實...發佈了一個答案你 – LGSon

引導例如：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    </div> 
</div>

CSS：

.square { 
    height: 0; 
    padding-bottom: 100%; 
    background-color: green; 
}

http://codepen.io/Deka87/pen/yMrmKK

來源

2017-04-05 22:05:36 sdvnksv

它看起來像我正在尋找的答案，但廣場沒有響應我的代碼，它仍然移動2列。你的Codepen是否包含Bootstrap？ – titibouboul

好吧，我錯過了一個元標記：http://stackoverflow.com/questions/9386429/simple-bootstrap-page-is-not-responsive-on-the-iphone – titibouboul

哈，這是一個很好的訣竅！ +1 – Johannes

你在找這樣的事嗎？ https://jsfiddle.net/5xc8fs0a/

它利用了填充百分比基於寬度的事實，所以padding-bottom：100％確保高度和寬度完全相同。

.square { 
    float: left; 
    width: 48%; 
    margin-right: 1%; 
    background: red; 
} 

.square:after { 
    content: ''; 
    display: inline-block; 
    height: 0; 
    padding-bottom: 100%; 
}

來源

2017-04-05 22:01:34 jas7457

這很好，但沒有反應！ – titibouboul

它響應，因爲它在您更改視口時響應，其寬度作出響應。「不響應」意味着什麼？它不會爲較小視圖疊加？ – jas7457

也許這是更多你在找什麼 - 與引導程序加載在：https://jsfiddle.net/90wzj4t0/ – jas7457

CSS中的響應式2列正方形

回答

相關問題