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

回答

相關問題