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

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

更新代码

堆栈段

​

.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>

​