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列正方形

回答

相关问题