Adakah mungkin untuk menukar susun atur yang dipaparkan pada resolusi yang lebih kecil melalui MediaQueries tanpa mengubah susun atur lalai?
P粉301523298
P粉301523298 2023-09-16 14:17:29
0
1
921

Saya menggunakan reka letak "Lajur Templat Grid" pada peleraian lalai supaya elemen muncul seperti yang diharapkan, tetapi pada peleraian yang lebih kecil ia dipaparkan mengikut keutamaan bekas, mewujudkan kesan visual yang ingin saya ubah.

Pada peleraian lalai: dipaparkan di sebelah kiri paparan, kemudian pada sisi lain paparan, kemudian 在显示屏左侧呈现,然后在显示屏的另一端呈现 ,然后是

位于其下方。在较小的分辨率上,我想让元素在此布局中呈现: 然后 然后

< / code> terletak di bawahnya. Pada peleraian yang lebih kecil, saya ingin elemen dipaparkan dalam reka letak ini: kemudian kemudian

satu untuk setiap Setiap berada di bawah yang lain.

<div className='container about_container'>

        <div>
          <div>
            <img src={image} alt='Image'/>
          </div>
          <Selector/>
        </div>

        <div>
         <Skills/>
          <div> 
            <p>
            blablabla
            </p>
          </div>
        </div>

      </div>
.container {
    width: 75%;
    margin: 0 auto;
}

.about_container {
    display: grid;
    grid-template-columns: 20% 75%;
    gap: 5%;
}
@media screen and (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
🎜
P粉301523298
P粉301523298

membalas semua(1)
P粉002546490

Pertimbangkan untuk memohon 显示:内容 在窄断点处的列包装器上,以便它们的布局框被它们的子级替换,从而有效地使它们的子级成为网格布局的子级。这样我们就可以使用 order untuk menyusun semula elemen kanak-kanak walaupun ia berada dalam elemen induk yang berbeza.

.container {
  width: 75%;
  margin: 0 auto;
}

.about_container {
  display: grid;
  grid-template-columns: 20% 75%;
  gap: 5%;
}
  
@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .contents {
    display: contents;
  }
  
  Selector {
    order: 2;
  }
  
  Skills {
    order: 1;
  }
  
  .paragraph-wrapper {
    order: 3;
  }
}
<div class='container about_container'>

  <div class="contents">
    <div>
      <img src="https://picsum.photos/48/48" alt='Image' />
    </div>
    <Selector>Selector</Selector>
  </div>

  <div class="contents">
    <Skills>Skills</Skills>
    <div class="paragraph-wrapper">
      <p>
        blablabla
      </p>
    </div>
  </div>

</div>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan