设置高度与宽度

Question

可以说我有一个div

div { 
 
    float: left; 
 
    width: 447px; 
 
    height: 447px; 
 
    background-color: blue; 
 
    margin-left: 1.3%; 
 
    margin-top: 1.3%; 
 
    max-width: 23.4%; 
 
    max-height: 47%; 
 
}

<div></div>

在div为盒状，它具有相同的宽度和高度。 但随着浏览器不断调整大小和屏幕越来越小，由于最大宽度和最大高度设置为％值，我不必使用媒体查询，但宽度和高度之间的比率变得越来越不同。 因此，我们可以说屏幕尺寸是1440x900，宽度和高度的计算将会不同，并且箱形将被破坏为矩形。

有没有办法如何保持div盒形状而不使用额外的媒体查询？

Answer 1

您可以使用视单位并设置height和width以相同vw例如。

div{ 
 
    width: 40vw; 
 
    height: 40vw; 
 
    background-color: blue; 
 
}

<div></div>

太保持方形屏幕边界之内，你可以在vh单位

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div{ 
 
    width: 60vw; 
 
    height: 60vw; 
 
    max-height: 100vh; 
 
    max-width: 100vh; 
 
    background-color: blue; 
 
}

<div></div>

Answer 2

视窗单元的选择几乎是UNIVERS添加max-height和max-width盟友支持在这一点上。

http://caniuse.com/#feat=viewport-units

但是，您也可以使用javascript/JQuery。

function onResize() { 
    var el = $('#element'); 
    el.height(el.width()); 
} 
$(window).resize(onResize); 
$(document).ready(onResize); 

注意，你的问题肯定是重复的。

Answer 3

div{ 
 
    width: 40vmin; 
 
    height: 40vmin; 
 
    background-color: blue; 
 
    display: inline-block; 
 
} 
 
div+div { background-color: green; }

<div></div><div></div>