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

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

钻石没有响应，因为网站被缩小到更小的尺寸，我在保持正确位置的同时很难让它响应

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

您可以在此处查看网站：

这是我的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>

---

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

vw

vw

代表viewport，最大值100（最小值为最小正数）占据当前屏幕/分辨率的全部大小，同时适用于高度和宽度

尝试将

.diamond

类的宽度和高度更改为

vw

单元，看看是否适合您

---

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

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

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

其中vw=第1/100个视口宽度

---

我玩了一会儿，固定菱形导航缩放得相当好。

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

/* 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 */
 }

---

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

.kontener{
显示：网格；
网格间距：5px；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
网格模板行：重复（2100px）；
}
.a{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：红色；文本对齐：居中；线条高度：100px；}
.b{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：绿色；文本对齐：居中；线宽：100px；}
.c{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：蓝色；文本对齐：居中；线条高度：100px；}
.d{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：黄色；文本对齐：居中；线条高度：100px；}
.e{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：紫色；文本对齐：居中；线条高度：100px；}
.f{颜色：白色；字体大小：1.75rem；字体重量：600；背景色：灰色；文本对齐：居中；线条高度：100px；}

1.
2.
3.
4.
5.
6.

您的媒体查询在哪里？据我所知，响应性意味着网页会根据您的屏幕大小进行调整。这并不是说动画。让一个响应性强的UI通过动画重新定位似乎非常困难，老实说也不是很有用。你能澄清你需要什么吗？当将值设置为%或vw/vh时，由于为每个单独的div设置的transform-translate属性值，元素仍然“卡在”位置上，我试图让他们在调整窗口大小或有人在手机/平板电脑上查看站点时正确定位。你能提供一个代码笔或JSFIDLE让我看到这个吗？我在codepen.io中尝试过，但它没有向右缩放。我最好不要使用transform-translate，而是使用top/left/right/bottom position属性？@Trisha我只是将每个钻石类（例如钻石-1、-2等）的固定宽度/高度改为14vw。您可能需要对容器和可能的转换进行其他调整，但我认为这应该适用于you@Trisha是的，它可能会简化将钻石相对于其容器定位的过程，并且仅使用变换进行旋转。希望这有帮助！我知道我可以使用媒体查询更改转换值，但我还没有这样做，因为我不需要为媒体查询每个单独的菱形div编写8000行代码。好的，然后您可以尝试使用jquery use resize（）方法获取设备，并使用css（）方法为所有菱形div设置内联css我曾尝试将.diamond类设置为vw单元，但效果不太好，元素仍然牢固地固定在适当的位置（使用transform属性）。我检查并替换了任何PX到vw的组件-这似乎真的很有帮助，它使所有组件都响应良好，所以谢谢现在，我只需要使文本响应，并添加媒体查询，以更改徽标&book now&social icon的定位，从而使它们不再出现在钻石中！这个答案保存了我的动画。谢谢

/* 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 */
 }