html - 如何使维恩图在移动设备上响应？

Question

如何在移动设备上使用此维恩图？当窗口调整大小时它会重叠。简而言之，维恩圈没有响应，我需要它在任何设备上都能响应。

有人知道这将如何运作吗？

.venn-container {
  padding: 25px 25px 25px 80px;
}
.venncircle {
	float: left;
  padding: 18px;
  width: 300px;
  height: 300px;
  -moz-border-radius: 750px;
  -webkit-border-radius: 750px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
}
.venncircle > a {
  font-size: 57px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop {
  padding: 50px 50px 50px 40px;
  width: 300px;
  height: 300px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  margin-bottom: -130px;
  margin-left: -70px;
  background-color: #0d8bba;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 1;
  position: relative;
}
.venncirctop > a {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop:hover {
  z-index: 5;
  background-color: #b8d7d8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(183, 214, 215, 0.5);
}
.venncircrt {
	padding: 20px 60px 5px 5px;
  width: 280px;
  height: 280px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
	margin-top: -150px;
  margin-left: 160px;
	margin-bottom: 270px;
  background-color: #5e577b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 3;
  text-align: right;
}
.venncircrt > a {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircrt:hover {
  z-index: 5;
  background-color: #625F75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 95, 117, 0.9);
}
.venncircbtm {
  padding: -10px 20px;
  width: 280px;
  height: 280px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  top: 15px;
  margin-right: 150px;
  margin-left: 50px;
  text-align: center;
  background-color: #627746;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 1;
  position: relative;
}
.venncircbtm > a {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircbtm:hover {
  z-index: 5;
  background-color: #3a4e20;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(58, 78, 32, 0.9);
}
.venntxttop {
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 10px;
}
.venntxttop:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtrt {
  margin: 0 0 0 87px;
  display: inline-block;
  position: relative;
  top: 63px;
  z-index: 5;
}
.venntxtrt:hover {
  color: #FFFFFF;
  text-decoration:none;
}

.venntxtbtm {
  text-align: center;
  display: inline-block;
  width: 70%;
  position: relative;
  top: 103px;
}
.venntxtbtm:hover {
  color: #FFFFFF;
  text-decoration:none;
}
 
div.testiform  {
	 margin: 0px 30px 0px 20px;
	padding: 0px 30px 0px 20px ;
	
}

<div class="container-fluid">
<div class="span9">
<div class="venn-container">
<div class="venncirctop"><a class="venntxttop" href="https://thepuppycarecompany.com/our-services/">Puppy Training</a></div>

<div class="venncircrt"><a class="venntxtrt" href="https://thepuppycarecompany.com/shop/">Paws &amp; Bones</a></div>
<div class="venncircbtm"><a class="venntxtbtm" href="#custom_html-14">Products &amp; Reviews</a></div>
&nbsp;

</div>
</div>
</div>

这是它在网络浏览器中的样子:

但是当我调整它的大小时，它是这样的:

这是网站:
https://thepuppycarecompany.com

Answer 1

看起来您在 860px 处设置了一个断点。对于低于该值的宽度，您可以对文本和圆圈的宽度/高度使用 vw 值。例如:

@media (max-width: 859px) {
    .venncirctop {
        ...
        width: 43vw;
        height: 43vw;
        ...
    }

    .venncirctop > a {
        font-size: 5vw;
        ...
    }
}

对其他两个圆圈重复此操作，它们将响应视口(viewport)的宽度。玩转这些数字，想出一些让你感觉舒服的东西。