Bagaimana untuk Menyusun Semula Elemen Flexbox Secara Responsif Semasa Mengekalkan SEO?

Menyesuaikan Pesanan Flexbox untuk Reka Letak DOM Responsif

Soalan:

Bagaimana anda boleh menyusun semula div menggunakan flexbox sambil mengekalkan carian struktur dioptimumkan enjin tanpa elemen berulang?

Jawapan:

Walaupun CSS sahaja tidak dapat mencapai tugas ini sepenuhnya, pendekatan hibrid tersedia.

Flexbox dengan Ketinggian Statik:

Anda boleh memanfaatkan flexbox dan ketinggian tetap untuk memesan div:

<code class="css">.flex {
  height: 90vh;
  display: flex;
  flex-flow: column wrap;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

Ini akan menyusun elemen secara menegak dan meletakkan div kedua di bahagian bawah.

Pertanyaan Media untuk Gelagat Responsif:

Gunakan pertanyaan media untuk mengendalikan saiz skrin yang berbeza:

<code class="css">@media (max-width:768px) {
  .flex div:nth-child(2) {
    order: 0;
  }
}</code>

Pada skrin yang lebih kecil, div kedua akan diletakkan di bahagian atas sekali lagi.

Penggayaan:

<code class="css">.flex-child {
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}</code>

Demo:

Lihat CodePen ini untuk kerja contoh: DEMO CODEPEN

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Elemen Flexbox Secara Responsif Semasa Mengekalkan SEO?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!