Reka Bentuk Responsif dengan Pertanyaan Media

Kuliah 16: Reka Bentuk Responsif dengan Pertanyaan Media

Dalam kuliah hari ini, kami akan meneroka reka bentuk responsif dan cara menjadikan tapak web anda kelihatan hebat pada mana-mana peranti menggunakan pertanyaan media. Pada zaman penyemakan imbas mudah alih, mencipta reka letak yang menyesuaikan diri dengan pelbagai saiz skrin adalah penting untuk pengalaman pengguna.

1. Apakah Reka Bentuk Responsif?

Reka bentuk responsif memastikan tapak web melaraskan reka letak, imej dan kandungannya agar sesuai dengan saiz dan orientasi skrin yang berbeza. Pendekatan ini meningkatkan kebolehgunaan pada peranti daripada telefon mudah alih hingga skrin desktop yang besar.

2. Apakah Pertanyaan Media?

Pertanyaan media ialah ciri CSS yang membolehkan anda menggunakan gaya secara bersyarat, berdasarkan faktor seperti saiz skrin, orientasi dan peleraian. Mereka membantu anda membuat reka bentuk yang "bertindak balas" kepada persekitaran pengguna.

3. Sintaks Pertanyaan Media Asas

Sintaks untuk pertanyaan media adalah mudah. Anda menentukan syarat (seperti lebar peranti) dan tulis gaya yang harus digunakan apabila syarat tersebut dipenuhi.

Contoh:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Dalam contoh ini, jika lebar skrin ialah 600px atau lebih kecil, warna latar belakang halaman akan bertukar kepada biru muda.

4. Titik Putus Biasa untuk Reka Bentuk Responsif

Titik putus ialah lebar skrin khusus yang anda mahu reka letak anda diubah. Walaupun setiap projek adalah unik, berikut ialah beberapa titik putus standard yang digunakan dalam reka bentuk responsif:

• Peranti kecil tambahan (telefon): lebar maksimum: 600px
• Peranti kecil (tablet): lebar maksimum: 768px
• Peranti sederhana (komputer riba kecil): lebar maksimum: 992px
• Peranti besar (desktop): lebar maksimum: 1200px

Contoh:

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
}
@media (max-width: 992px) {
    .container {
        padding: 30px;
    }
}

Dalam contoh ini, padding kelas .container akan berubah berdasarkan saiz skrin. Ia akan menjadi 20px pada tablet dan 30px pada komputer riba yang lebih kecil.

5. Menggunakan Pertanyaan Media untuk Melaraskan Reka Letak

Anda boleh menggunakan pertanyaan media untuk melaraskan reka letak elemen, menjadikannya lebih mudah diakses dan menarik secara visual pada peranti yang lebih kecil.

Contoh:

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.flex-container {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
}

Dalam contoh ini, item dalam bekas .flex akan disusun secara mendatar pada skrin yang lebih besar, tetapi pada skrin 768px atau lebih kecil, ia akan disusun secara menegak.

6. Pertanyaan Media untuk Imej

Apabila membina reka bentuk responsif, imej perlu disesuaikan juga. Anda boleh menggunakan pertanyaan media untuk memastikan imej diubah saiz mengikut saiz skrin.

Contoh:

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

@media (max-width: 768px) {
    img {
        width: 80%;
    }
}

Di sini, imej akan mengambil 100% daripada lebar bekas pada skrin yang lebih besar, tetapi pada skrin 768px atau lebih kecil, ia hanya akan mengambil 80%.

7. Pertanyaan Media Berasaskan Orientasi

Anda juga boleh melaraskan gaya anda berdasarkan orientasi peranti (potret atau landskap). Ini boleh berguna untuk peranti seperti tablet dan telefon pintar yang sering diputar.

Contoh:

@media (orientation: landscape) {
    .header {
        background-color: darkblue;
    }
}

Dalam kes ini, warna latar belakang pengepala berubah apabila peranti berada dalam mod landskap.

8. Tipografi Responsif

Tipografi responsif adalah penting untuk memastikan teks anda kekal boleh dibaca pada semua peranti. Anda boleh menggunakan pertanyaan media untuk melaraskan saiz fon berdasarkan saiz skrin.

Contoh:

body {
    font-size: 16px;
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Ini mengurangkan saiz fon kepada 14px pada skrin yang lebih kecil daripada 600px, menjadikan teks lebih sesuai untuk pengguna mudah alih.

9. Menggabungkan Pertanyaan Berbilang Media

Anda boleh menggabungkan berbilang pertanyaan media untuk mewujudkan keadaan yang sangat khusus untuk penggayaan.

Contoh:

@media (min-width: 600px) and (max-width: 768px) {
    .container {
        padding: 15px;
        background-color: lightgreen;
    }
}

Ini akan menggunakan gaya hanya jika saiz skrin antara 600px dan 768px.

10. Alat untuk Menguji Reka Bentuk Responsif

• Google Chrome DevTools: Anda boleh menguji reka bentuk responsif anda dengan menogol mod peranti.
• Mod Reka Bentuk Responsif dalam Firefox: Satu lagi alat hebat untuk melihat reka bentuk anda pada saiz skrin yang berbeza.
• Alat Dalam Talian: Tapak web seperti Adakah Saya Responsif? atau Screenfly membolehkan anda melihat penampilan tapak web anda pada peranti yang berbeza.

Kesimpulan

Dengan pertanyaan media, mencipta reka bentuk responsif yang kelihatan baik pada mana-mana peranti menjadi mudah. Sama ada anda melaraskan reka letak, mengubah saiz imej atau mengubah suai tipografi, pertanyaan media memberi anda fleksibiliti untuk membina tapak web yang menyesuaikan diri dengan landskap digital yang sentiasa berubah.

---

Ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Reka Bentuk Responsif dengan Pertanyaan Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!