Question

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

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个单位来表示圆圈的大小，它们相对于彼此的个别位移以及字体大小。< / p>

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

它被设计为在纵向模式下在移动设备上运行良好，其中图形将占据大部分可用的水平空间，但是一旦您将手机转为横向模式，它将保持显示器宽度和图的宽度，所以你不能再看到图的顶部和底部，但更糟糕的是，一旦你在桌面/笔记本电脑上观看它的大小将被炸成疯狂的尺寸，它只会看起来很奇怪

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

我认为我可以通过媒体查询轻松完成这项工作。我可以使用媒体查询为$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

Stack snippet

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

Answer 2

您可以使用vmin使其适合并响应视口宽度和高度。

vmin等于vw和vh中的较小者。

$circle-width: 35vmin;

<强> jsFiddle

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

2 个答案: