javascript - 使用 CSS transform 属性使元素响应

Question

我有一个网站，页面顶部固定有菱形。每个菱形都是一个使用 CSS 变换属性旋转和定位的 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代表v视口(viewport)width的1%，100 vw占满当前窗口(视口(viewport))的宽度。

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

因为它是一个相对的单位集，它会调整大小以适应更新后的调整大小的视口(viewport)，而不是固定在那里。