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

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单位。

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

它被设计为在纵向模式下在移动设备上很好地工作，其中图形将占据大部分可用的水平空间，但是一旦您将手机转到横向模式，它将保持显示屏宽度和图形宽度之间的相同比例，因此您再也看不到图形的顶部和底部， 但更糟糕的是，一旦你在台式机/笔记本电脑上观看它，尺寸就会被放大到疯狂的尺寸，它看起来会很奇怪。

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

我想我可以通过媒体查询轻松做到这一点。我可以使用媒体查询为$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>