响应式 CSS 正方形答案

【问题标题】：Responsive CSS square响应式 CSS 正方形
【发布时间】：2014-02-06 08:56:53
【问题描述】：

仅使用 CSS 而不是 javascript，我如何根据窗口宽度/高度的最小值制作一个正方形？

我见过各种方法，但无论您使用的是普通笔记本电脑还是移动设备，我都希望它能够响应。

JQuery 可以使用Math.min($(window).width(), $(window).height()) 来做到这一点，但必须有一种方法可以通过 CSS 来实现这一点吗？

【问题讨论】：

如果您希望宽度和高度始终相同，则需要 javascript

标签： css responsive-design

【解决方案1】：

div 中没有文字，你可以这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {width: 20%; padding-bottom: 20%; background: #F97E76;}

</style>
</head>
<body>

<div></div>

</body>
</html>

如果您正在创建画廊，这很有用，因为您可以将背景图像应用到框。不过，它作为文本容器的布局工具用处不大。

你可以像这样在里面放一些文字（虽然小尺寸会很快溢出）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.outer {width: 20%; padding-bottom: 20%; background: #F97E76; position: relative;}
.inner {position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;}

</style>
</head>
<body>

<div class="outer">
    <div class="inner">
        <p>This is text within the div, lots of text that's pretty useless.</p>
        <p>This is text within the div, lots of text that's pretty useless.</p>
        <p>This is text within the div, lots of text that's pretty useless.</p>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

事实证明，使用 CSS3 的媒体查询和 vh/*vw* 单位（视口），您可以逐个进行：

@media all and (orientation:portrait) {     
    #itemToCenter {
        width: 100vw;
        height: 100vw;
    }  
}
@media all and (orientation:landscape) {
    #itemToCenter {
        width: 100vh;
        height: 100vh;      
    }   
}

【讨论】：