要素を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

ダイヤモンドクラスの幅/高さを、ビューポート単位で画面サイズに対して設定してみてください。だから、例えば：私はかなりうまくスケールこのビットと固定のダイヤモンドのナビゲーションで再生VW = 1/100分のビューポートの幅

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

。

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>