Question

假设我有一个div

＆＃13;

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%;
}

＆＃13;

<div></div>

＆＃13;

div是盒形的，它具有相同的宽度和高度。但是由于浏览器不断调整大小并且屏幕越来越小，因为max-width和max-height设置为％value我不必使用媒体查询但是它们之间的比例宽度和高度变得越来越不同。因此，假设屏幕尺寸为1440x900，宽度和高度的计算将不同，框形将被破坏为矩形。

有没有办法在不使用额外的媒体查询的情况下保持div盒的形状？

Answer 1

您可以使用视口单元，并将height和width设置为相同的vw。

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

<div></div>

在屏幕边界内保持正方形，您可以max-height个单位添加max-width和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

此时几乎普遍支持视口单元选项。

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>

设置高度到宽度

3 个答案: