使元素具有CSS变换属性的响应能力

Question

我有一个网站，页面顶部固定有钻石。每个菱形都是使用CSS transform属性旋转和定位的div框。

菱形没有响应，因此站点缩放到较小的尺寸时，我很难在保持正确位置的同时使其具有响应能力。

我尝试使用媒体查询来设置钻石和钻石容器的宽度/高度，但这会破坏每个钻石的位置。

您可以在此处查看该站点：http : //amberrein.wpengine.com/

这是我的HTML：

         <div id="diamonds">
            <div class="diamond diamond-1">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-2">
              <div class="fill blank"></div>
            </div>
            <hr>
            <div class="diamond diamond-3">
              <div class="fill logo">
                <a href="#"><img src="https://amberrein.wpengine.com/wp-content/uploads/2017/03/Logo.png"></a>
              </div>
            </div>
            <div class="diamond diamond-4">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-5">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-6">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-7">
              <div class="fill blank"></div>
            </div>
            <div class="diamond diamond-8">
              <div class="fill book-now">Book Now</div>
            </div>
            <div class="social-diamonds">
              <div class="facebook">
                <a href="#"><i class="fa fa-facebook fa-fw fa-lg"></i></a>
              </div>
              <div class="twitter">
                <a href="#"><i class="fa fa-twitter fa-fw fa-lg"></i></a>
              </div>
              <div class="instagram">
                <a href="#"><i class="fa fa-instagram fa-fw fa-lg"></i></a>
              </div>
              <div class="google">
                <a href="#"><i class="fa fa-google-plus fa-fw fa-lg"></i></a>
              </div>
            </div>
          </div>

这是我的CSS：

#diamonds {
  background: transparent;
  width: 100%;
  max-width: 340px;
  height: 455px;
  position: fixed;
  left: 0;
  top: 0;
  animation: 1.5s fadeInTop ease-in-out;
}

.admin-bar #diamonds {
  top: 32px;
}
.diamond {
  width: 150px;
  height: 150px;

}
.diamond.diamond-7 {
  width: 160px;
  height: 160px;
}
.diamond.diamond-8 {
  width: 75px;
  height: 75px;
}
.fill {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  display: block;
}
.logo img {
  max-width: 150px;
  width: 100%;
  transform: rotate(-45deg) translate(-26px,10px);

}
.diamond-1 {
  background: #eee;
  transform: scale(1,1) rotate(45deg) translate(-106px, 0);
}
.diamond-2 {
  background: #888;
  transform: scale(1,1) rotate(45deg) translate(-52px, -266px);
}
.diamond-3 {
  background: #ddd;
  transform: scale(1,1) rotate(45deg) translate(-28px, -82px);
}
.diamond-4 {
  background: rgba(85,85,85,0.9);
  transform: scale(1,1) rotate(45deg) translate(-134px, -28px);
}
.diamond-5 {
  background: rgba(187,187,187,.7);
  transform: scale(1,1) rotate(45deg) translate(-80px, -294px);
}
.diamond-6 {
  background: rgba(238,238,238,.5);
  transform: scale(1,1) rotate(45deg) translate(-186px, -240px);
}
.diamond-7 {
  background: transparent;
  border: 1px solid #444;
  transform: scale(1,1) rotate(45deg) translate(-220px, -427px);
}
.diamond-8 {
  background: rgba(0,0,0,.05);
  transform: scale(1,1) rotate(45deg) translate(-393px, -743px);
}
.fill.book-now {
  transform: scale(1,1) rotate(-45deg) translate(0px,18px);
  font-family: 'Cardo';
  font-size: 18px;
  color: #000;
  text-align: center;
}
#diamonds hr {
  margin-top: -193px;
  visibility: hidden;
}

.social-diamonds {
  color: #fff;
  z-index: 99999;
  position: fixed;
  top:-32px;
  left:0;
}

.admin-bar .social-diamonds {
  top: 0;
}

.social-diamonds a {
  color: #fff;
}

.facebook {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,-15px);
  transition: all 300ms ease-in-out;
}
i.fa-facebook {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.twitter {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,60px);
  transition: all 300ms ease-in-out;
}
i.fa-twitter {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.instagram {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,144px);
  transition: all 300ms ease-in-out;
}
i.fa-instagram {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}

.google {
  color: #fff;
  background: #ddd;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  transform: scale(1,1) rotate(45deg) translate(347px,218px);
  transition: all 300ms ease-in-out;
}
i.fa-google-plus {
  transform: scale(1,1) rotate(-45deg);
  transition: 300ms linear;
}



.facebook:hover, .twitter:hover, .instagram:hover, .google:hover {
  background: #aaa;
      transition: all 300ms ease-in-out;
    }

Answer 1

我建议的第一件事是将所有基于像素的尺寸更改为相对长度单位集，例如vw。

vw 代表视口，最大值100（最小值是最低的正数）占据了当前屏幕/分辨率的全部大小，并同时应用于高度和宽度。

尝试将类的宽度和高度更改.diamond为一个vw单位，然后查看是否适合您。

由于它是相对单位集，因此它将调整大小以适应新的调整大小视口，而不是固定在该视口中。