使用CSS转换属性使元素响应

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代表视口，最大值100（最小值为最低正数）占用当前屏幕/分辨率的完整大小，并适用于高度和宽度。

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

由于它是一个相对单位集，它将调整大小以适应较新的已调整大小的视口而不是在那里修复。

Answer 2

尝试使用视口单位设置钻石类相对于屏幕大小的宽度/高度。例如：

diamond {
   width: 14vw;
   height: 14vw;
}

其中vw = 1/100视口宽度

我玩了一下，固定的钻石导航相当不错。

Answer 3

使用不同设备的媒体查询更改转换值。

/* Large desktop */
@media (min-width: 1200px) { 
 /* your code */
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
/* your code */
 }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
/* your code */
 }

/* Landscape phones and down */
@media (max-width: 480px) { 
/* your code */
 }

Answer 4

这使用CSS网格和分数单位（fr）。全屏测试。

.kontener {
  display: grid;
  grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}
.a {color: white; font-size:1.75rem; font-weight:600;  background-color: red;text-align: center;line-height: 100px;}
.b {color: white; font-size:1.75rem; font-weight:600; background-color: green;text-align: center;line-height: 100px;}
.c {color: white; font-size:1.75rem; font-weight:600; background-color: blue;text-align: center;line-height: 100px;}
.d {color: white; font-size:1.75rem; font-weight:600; background-color: yellow;text-align: center;line-height: 100px;}
.e {color: white; font-size:1.75rem; font-weight:600; background-color: purple;text-align: center;line-height: 100px;}
.f {color: white; font-size:1.75rem; font-weight:600; background-color: grey;text-align: center;line-height: 100px;}

<div class="kontener">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>