Responsive CSS square

-1

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

我见过各种方法，但我希望它能够响应您是否在典型的笔记本电脑或移动设备上。

JQuery可以使用Math.min($(window).width(), $(window).height())来做到这一点，但是必须通过CSS来完成这个任务吗？

2014-02-05 Feng Huo

如果您希望宽度和高度始终保持相同，您需要javascript – Ibu

没有在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>

来源

2014-02-05 23:19:38

原来使用CSS3媒体查询和VH/* VW *单位（视口），您可以按具体情况来做：

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

来源

2014-02-06 00:56:53

Responsive CSS square

回答

相关问题