Bagaimanakah Saya Boleh Mengubah Susunan Div dengan CSS Berdasarkan Saiz Skrin?

Tukar Div Order dengan CSS Berdasarkan Lebar Peranti

Apabila membuat tapak web responsif, adalah perkara biasa untuk menghadapi cabaran dalam mengurus susunan elemen seperti saiz skrin berubah. Walaupun penyelesaian mudah wujud untuk dua atau tiga div, pesanan menjadi lebih kompleks dengan peningkatan bilangan elemen.

Untuk menangani isu ini, spesifikasi flexbox CSS menawarkan penyelesaian yang berkuasa menggunakan sifat tertib dan aliran lentur. Sifat ini membenarkan susunan elemen yang fleksibel sambil mengekalkan paparan blok sebarisnya.

Penyelesaian berikut memenuhi keperluan yang dinyatakan dalam soalan:

• Elemen pada mulanya dipaparkan sebagai satu baris.
• Apabila lebar skrin jatuh di bawah titik putus yang ditentukan, ia beralih kepada lajur susun atur.
• Susunan elemen diubah suai dalam reka letak lajur untuk mencipta susunan yang diingini.

Struktur HTML:

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

Gaya CSS:

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container {
        display: flex;
        flex-flow: column;
    }
    .five { order: 1; }
    .four { order: 2; }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

Penyelesaian ini memastikan bahawa apabila skrin lebar menjadi terlalu sempit, div menyusun semula diri mereka berdasarkan susunan yang ditentukan, sambil mengekalkan reka letak blok sebaris dan mengekalkan kandungan dan dimensinya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Susunan Div dengan CSS Berdasarkan Saiz Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!