Beranda>Tutorial Desain Web>Tutorial CSS

@pertanyaan umum FAQ di CSS3

Penulis：Eve Cole Waktu Pembaruan：2024-12-24 13:16:37

Kueri @media CSS3 adalah fitur canggih yang memungkinkan kita menerapkan aturan gaya berbeda berdasarkan jenis media dan karakteristik perangkat berbeda. Hal ini memungkinkan kami membuat desain responsif yang memastikan situs web atau aplikasi memberikan pengalaman pengguna yang luar biasa di berbagai perangkat dan ukuran layar. Artikel ini akan membahas definisi, sintaksis, skenario penggunaan, dan masalah umum kueri @media secara mendetail.

1. Definisi kueri @media

Aturan @media CSS3 memungkinkan Anda menerapkan aturan gaya yang berbeda berdasarkan jenis media dan properti media. Jenis Media (Media Type) seperti screen (screen), print (print), dll., sedangkan Fitur Media (Fitur Media) seperti width , height , orientation dll., digunakan untuk menggambarkan karakteristik spesifik perangkat.

2. Sintaks dasar kueri @media

Sintaks dasar kueri @media adalah sebagai berikut:

 @media mediatype dan|tidak|hanya (fitur media) {
    /* Aturan CSS*/
}
mediatype : Tentukan jenis media, seperti screen , print , dll. Jika dihilangkan, defaultnya adalah semua jenis media. fitur media : Menentukan kondisi untuk fitur dan nilai media, seperti min-width , max-width , orientation , dll.

3. Operator logika

Dalam kueri @media, Anda dapat menggunakan operator logika berikut untuk menggabungkan kondisi media:

dan : Menunjukkan bahwa semua kondisi harus dipenuhi. not : Menunjukkan bahwa gaya diterapkan ketika kondisi tidak terpenuhi. only : Digunakan untuk mencegah browser lama yang tidak mendukung kueri media menerapkan gaya. Koma : Menunjukkan bahwa gaya diterapkan ketika salah satu dari beberapa kondisi terpenuhi.

4. Skenario penggunaan

1. Atur gaya berdasarkan ukuran layar

 @layar media dan (lebar minimum: 600 piksel) {
    tubuh {
        warna latar: biru muda;
    }
}

Jika lebar layar minimal 600 piksel, warna latar belakang halaman berubah menjadi biru muda.

2. Desain responsif

 @layar media dan (lebar maksimal: 800 piksel) {
    .wadah {
        lebar: 100%;
    }
}
@layar media dan (lebar minimum: 801 piksel) {
    .wadah {
        lebar: 750 piksel;
    }
}

Ubah lebar wadah berdasarkan lebar layar untuk desain responsif.

3. Gaya cetak

 @media cetak {
    tubuh {
        ukuran font: 12pt;
        warna: hitam;
        latar belakang: putih;
    }
}

Atur gaya tertentu untuk pencetakan, seperti ukuran font, warna, dan latar belakang.

4. Layar horizontal dan vertikal

 @layar media dan (orientasi: lanskap) {
    #bilah samping {
        tampilan: tidak ada;
    }
}

Sembunyikan sidebar saat perangkat dalam mode lanskap.

5. Ciri-ciri umum media

CSS3 menyediakan berbagai fitur media. Berikut beberapa fitur yang umum digunakan:

width , min-width , max-width : Menentukan lebar area halaman yang terlihat di perangkat keluaran. height , min-height , max-height : Menentukan tinggi area halaman yang terlihat di perangkat keluaran. orientasi : Menentukan orientasi perangkat, seperti portrait (layar vertikal) dan landscape (layar horizontal). resolusi : Mendefinisikan resolusi perangkat. color , color-index : Menentukan kemampuan warna dan indeks warna.

6. Tindakan Pencegahan

Penyortiran kondisi media : Saat menggunakan min-width dan max-width sebagai kondisi penilaian, Anda harus memastikan bahwa rentang kondisi diurutkan dari kecil ke besar atau dari besar ke kecil untuk menghindari masalah cakupan gaya. Konflik gaya : Pastikan gaya dalam kueri @media tidak ditimpa oleh aturan CSS berikutnya. Disarankan untuk menulis gaya kueri @media di bagian akhir. Tag meta : Tetapkan <meta name="viewport" content="width=device-width, initial-scale=1.0"> untuk memastikan bahwa perangkat seluler dapat merender halaman dengan benar. Kesalahan sintaks : Pastikan sintaks query @media sudah benar, terutama spasi setelah operator logika dan jangan menulis terminator ";" di dalam tanda kurung.

7. Ringkasan

Kueri @media CSS3 adalah alat penting untuk membuat desain responsif, memungkinkan kita menerapkan aturan gaya berbeda berdasarkan jenis media dan properti media berbeda. Dengan memanfaatkan kueri @media, kami dapat memastikan bahwa situs web atau aplikasi kami memberikan pengalaman pengguna yang luar biasa di berbagai perangkat dan ukuran layar. Saya harap artikel ini dapat membantu Anda lebih memahami dan menggunakan kueri @media.

Ini menyimpulkan artikel ini tentang @media query di CSS3. Untuk konten query @media CSS3 yang lebih terkait, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel yang relevan di bawah.

Artikel Terkait