我有一个网站,页面顶部固定有菱形。每个菱形都是一个使用 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;
}
最佳答案
我建议的第一件事是将所有基于像素的尺寸更改为相对长度单位集,例如 vw
。
vw
代表v视口(viewport)width的1%,100 vw
占满当前窗口(视口(viewport))的宽度。
尝试将 .diamond
类的宽度和高度更改为 vw
单位,看看是否适合您。
因为它是一个相对的单位集,它会调整大小以适应更新后的调整大小的视口(viewport),而不是固定在那里。
关于javascript - 使用 CSS transform 属性使元素响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42935144/