视口单位随着宽度和高度的变化而缩放

Question

我正在为一个项目创建一个 venn 风格的图表，并提出了这种方法：

https://codepen.io/webconsult/pen/KQMMJm

<div class="venn-diagram">
  <div class="circle-business"><span class="label">Business</span></div>
  <div class="circle-design"><span class="label">Design</span></div>
  <div class="circle-technology"><span class="label">Technology</span</div>
</div>

---

// Variables
$circle-width: 35vmin;
$horizontal-displacement: 0.40;
$vertical-displacement: 0.70;
$standard-margin: 20px;

// Color palette
$green: #00d6a4;
$pink: #f46197;
$dark-blue: #0a2342;
$medium-blue: #274060;
$light-blue: #01baef;

// Pallette assignments
$main: $medium-blue;
$main-dark: $dark-blue;
$main-light: $light-blue;
$identity: $green;
$emphasis: $pink;

// Mixins
@mixin center-children {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin center-children-top {
  @include center-children;
  > * {
    align-self: flex-start;
  }
}

@mixin circle($diameter) {
  border-radius: 50%;
  width: $diameter;
  height: $diameter;
}

// Instance styling starts here

.venn-diagram {
    position: relative;
    z-index: 0;
    height: 1.7 * $circle-width;
    @include center-children-top;
    margin: (2*$standard-margin) $standard-margin;
}

.circle-technology, .circle-design, .circle-business {
    @include circle($circle-width);
    @include center-children;
    .label {
        font-size: $circle-width/8;
        font-weight: 100;
    }
}

.circle-design {
    position: relative;
    background-color: $emphasis;
    z-index: 1;
}

.circle-business {
    position: absolute;
    margin-left: -($circle-width * $horizontal-displacement);
    margin-top: ($circle-width * $vertical-displacement);
    z-index: 2;
    background-color: fade-out($main-light, 0.1);
}

.circle-technology {
    position: absolute;
    margin-left: ($circle-width * $horizontal-displacement);
    margin-top: ($circle-width * $vertical-displacement);
    z-index: 3;
    background-color: fade-out($main, 0.1);
}

p.introduction {
    padding: 0 $standard-margin * 2;
}

它工作得相当好，最重要的是，当您调整浏览器大小时它可以完美缩放，因为我为我们选择了vw 单位来表示圆圈的大小、它们相互之间的独立位移以及字体大小。

所以我认为一切都很好，但现在我意识到它实际上并不能很好地适应不同的屏幕尺寸和纵横比。

它的设计目的是在纵向模式下很好地在移动设备上运行，在这种模式下，人物会占据大部分可用的水平空间，但是一旦你将手机切换到横向模式，它就会保持屏幕宽度与屏幕宽度之间的相同比例。图形的宽度，因此您无法再看到图形的顶部和底部，但更糟糕的是，一旦您在台式机/笔记本电脑上观看，尺寸将被放大到疯狂的尺寸，看起来很奇怪.

所以我需要某种“艺术指导”——即我需要能够在图形宽度和屏幕尺寸之间设置不同的关系。

我想我可以通过媒体查询轻松做到这一点。我可以使用媒体查询为$circle-width 变量设置不同的值，并让它们影响不同的使用场景。令我失望的是，我发现 SASS 变量是在编译时编写的并不那么容易。我有点失去了注意力，无法弄清楚如何为不同的显示器缩放这个数字。有什么建议吗？

Answer 1

这似乎是纵向/横向问题，为此您可以在查询中使用orientation。

如前所述，使用vmin 将选择视口宽度/高度中的较小值，尽管通常它不仅仅如此。使用orientation，您既可以微调vw/vh，也可以更好地控制定位，而不是使用给定的宽度作为断点。

另外，在设置查询时，您需要重复这样的类以使其正常工作：

@media screen and (orientation: portrait) {

  .venn-diagram {
      height: 1.7 * $circle-width-portrait;
  }

  .circle-technology, .circle-design, .circle-business {
      @include circle($circle-width-portrait);

      .label {
        font-size: $circle-width-portrait/8;
      }
  }
  .circle-business {
      margin-left: -($circle-width-portrait * $horizontal-displacement);
      margin-top: ($circle-width-portrait * $vertical-displacement);
  }
  .circle-technology {
      margin-left: ($circle-width-portrait * $horizontal-displacement);
      margin-top: ($circle-width-portrait * $vertical-displacement);
  }
}

---

Updated codepen

堆栈sn-p

.venn-diagram {
  position: relative;
  z-index: 0;
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 20px;
}
.venn-diagram > * {
  align-self: flex-start;
}

.circle-technology, .circle-design, .circle-business {
  border-radius: 50%;
  width: 50vh;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-technology .label, .circle-design .label, .circle-business .label {
  font-size: 6.25vh;
  font-weight: 100;
}

.circle-design {
  position: relative;
  background-color: #f46197;
  z-index: 1;
}

.circle-business {
  position: absolute;
  margin-left: -20vh;
  margin-top: 35vh;
  z-index: 2;
  background-color: rgba(1, 186, 239, 0.9);
}

.circle-technology {
  position: absolute;
  margin-left: 20vh;
  margin-top: 35vh;
  z-index: 3;
  background-color: rgba(39, 64, 96, 0.9);
}

p.introduction {
  padding: 0 40px;
}

@media screen and (orientation: portrait) {
  .venn-diagram {
    height: 85vw;
  }

  .circle-technology, .circle-design, .circle-business {
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
  }
  .circle-technology .label, .circle-design .label, .circle-business .label {
    font-size: 6.25vw;
  }

  .circle-business {
    margin-left: -20vw;
    margin-top: 35vw;
  }

  .circle-technology {
    margin-left: 20vw;
    margin-top: 35vw;
  }
}

<div class="venn-diagram">
  <div class="circle-business"><span class="label">Business</span></div>
  <div class="circle-design"><span class="label">Design</span></div>
  <div class="circle-technology"><span class="label">Technology</span></div>
</div>