Bagaimana untuk menulis susun atur responsif html5

Reka letak responsif HTML5 ialah teknologi reka bentuk web yang sangat popular yang membolehkan tapak web memaparkan secara adaptif pada peranti yang berbeza. Dalam era Internet hari ini, orang ramai menggunakan pelbagai peranti untuk menyemak imbas tapak web, seperti telefon mudah alih, tablet, komputer riba dan desktop Skrin peranti ini berbeza dalam saiz dan resolusi. Oleh itu, mereka bentuk tapak web yang boleh menyesuaikan diri dengan peranti ini adalah penting. Dalam artikel ini, kami akan menerangkan secara mendalam cara melaksanakan reka letak responsif HTML5.

1. Pertanyaan Media

Langkah pertama dalam melaksanakan reka letak responsif HTML5 ialah menggunakan pertanyaan media. Pertanyaan media ialah ciri baharu CSS3 yang boleh menentukan gaya berbeza berdasarkan saiz skrin dan resolusi peranti. Pertanyaan media ditakrifkan melalui kata kunci @media dan mengandungi satu set peraturan CSS yang akan digunakan apabila peranti memenuhi syarat.

Contohnya, untuk menentukan gaya berbeza untuk saiz skrin peranti yang berbeza, anda boleh menggunakan kod berikut:

@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: yellow;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 16px;
        background-color: blue;
    }
}

@media only screen and (min-width: 1025px) {
    body {
        font-size: 18px;
        background-color: red;
    }
}

Contoh ini mentakrifkan tiga pertanyaan media, satu untuk saiz skrin yang berbeza. Apabila lebar skrin kurang daripada atau sama dengan 600 piksel, gaya dalam pertanyaan pertama digunakan apabila lebar skrin lebih daripada 600 piksel dan kurang daripada atau sama dengan 1024 piksel, gaya dalam pertanyaan kedua digunakan apabila; lebar skrin lebih besar daripada 1024 piksel, gaya dalam pertanyaan kedua digunakan Gaya dalam tiga pertanyaan.

2. Reka Letak Kotak Fleksibel

Reka Letak Kotak Fleksibel ialah mod susun atur CSS3 baharu yang membolehkan elemen diregangkan dan disusun secara bebas dalam bekas. Susun atur kotak fleksibel dilaksanakan dengan menentukan bekas fleksibel. Untuk menukar elemen kepada bekas lentur, tetapkan sifat paparan elemen kepada lentur atau lentur sebaris.

Contohnya, kod berikut boleh menukar elemen div menjadi bekas fleksibel:

.div {
    display: flex;
}

Selepas menukar elemen menjadi bekas fleksibel, anda boleh mengawal cara item flex muat di dalam bekas dengan menentukan pengedaran sifat lentur mereka. Sifat flex boleh ditetapkan kepada nombor yang mewakili jumlah relatif ruang yang diperuntukkan kepada item. Secara lalai, item flex mempunyai sifat flex 1, yang bermaksud ia mengagihkan ruang yang tersedia secara sama rata.

Sebagai contoh, kod berikut boleh mentakrifkan dua item flex yang menduduki 1/3 dan 2/3 lebar bekas masing-masing:

.div {
    display: flex;
}

.item1 {
    flex: 1;
}

.item2 {
    flex: 2;
}

Dalam contoh ini, atribut flex bagi .item1 elemen ialah 1 , atribut flex bagi elemen .item2 ialah 2. Jadi, .item1 akan mengambil 1/3 daripada lebar bekas dan .item2 akan mengambil 2/3 daripada lebar bekas.

3. Sistem grid

Sistem grid ialah corak reka bentuk reka letak responsif yang biasa digunakan yang membentangkan kandungan berdasarkan sistem grid. Sistem grid membahagikan reka letak halaman web kepada satu siri lajur, dan lebar setiap lajur ditetapkan atau dilaraskan secara dinamik mengikut saiz skrin peranti. Dalam sistem grid ini, setiap bekas dibahagikan kepada 12 lajur dan lajur berbeza digabungkan bersama mengikut saiz skrin yang berbeza, sekali gus mencapai reka letak responsif.

Sebagai contoh, kod berikut menunjukkan reka letak dua lajur berdasarkan sistem grid:

<div class="container">
    <div class="row">
        <div class="col-6">
            Column 1
        </div>
        <div class="col-6">
            Column 2
        </div>
    </div>
</div>

Dalam contoh ini, kelas .container ialah bekas lebar tetap dan kelas .row ialah baris Grid grid, jenis .col-6 mewakili lajur yang menduduki 6 lajur. Dalam sistem grid ini, elemen .col-6 akan mengambil 1/2 lebar bekas dan berbaris sebelah menyebelah.

4. Imej responsif

Dalam reka letak responsif HTML5, imej juga perlu responsif untuk menyesuaikan diri dengan saiz skrin peranti yang berbeza. Penyelesaian biasa ialah menggunakan sifat lebar maksimum CSS untuk menetapkan lebar maksimum imej. Apabila saiz skrin lebih kecil daripada lebar maksimum imej, imej akan mengecil secara automatik agar sesuai dengan saiz skrin.

Sebagai contoh, kod berikut boleh melaksanakan imej penyesuaian:

img {
    max-width: 100%;
    height: auto;
}

Dalam contoh ini, atribut lebar maksimum menetapkan lebar maksimum imej kepada 100%, menunjukkan bahawa imej akan sesuaikan dengan saiz bekas. Atribut ketinggian ditetapkan kepada auto, yang bermaksud ketinggian imej akan dilaraskan secara automatik mengikut lebar untuk mengekalkan perkadaran imej.

Kesimpulan

Reka letak responsif HTML5 ialah teknologi reka bentuk tapak web yang berkuasa yang membolehkan tapak web memaparkan secara adaptif pada peranti berbeza. Dalam artikel ini, kita bercakap tentang empat cara untuk melaksanakan reka letak responsif: pertanyaan media, reka letak kotak flex, sistem grid dan imej responsif. Sama ada anda sedang membangunkan tapak web baharu atau menaik taraf tapak web sedia ada, menguasai teknik ini akan membantu anda mencipta pengalaman pengguna yang lebih baik dan memenuhi keperluan pengguna merentas peranti yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menulis susun atur responsif html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!