Media Query CSS - Contoh
- Hal Sebelumnya CSS 查詢媒體
- Hal Berikutnya Pengenalan RWD
Media Query CSS - Contoh lanjut
Lihat contoh yang lain yang menggunakan pemilihan media.
Pemilihan media adalah teknologi yang populer untuk menghantar gaya khusus kepada peralatan berbeza.
Berikut adalah contoh yang sederhana untuk mengubah warna latar bagi peralatan berbeza:
Contoh
/* Setkan warna latar badan menjadi tan */
body {
background-color: tan;
}
/* Saat skrin kurang daripada atau sama dengan 992 piksel, setkan warna latar menjadi biru */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Saat skrin 600 piksel atau kecil, setkan warna latar menjadi olivedrab */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Anda ingin mengetahui mengapa kami menggunakan 992px dan 600px secara tepat? Ini adalah apa yang kami sebut 'poin pusing tipikal' peralatan (typical breakpoints). Anda boleh melihat di Panduan Rancangan Web Ber respons Pertimbangkan maklumat lebih lanjut tentang poin pusing tipikal di dalam muka bumi.
Query media menu
Dalam contoh ini, kami menggunakan query media untuk membuat menu navigasi responsif yang berbeda di berbagai ukuran layar.
Contoh
/* Container navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Tautan Navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Pada lebar layar 600 paksi atau kurang, jadikan tautan menu saling bersalib, bukannya bersambung */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Query media kolom
Penggunaan biasa query media adalah untuk membuat tata letak fleksibel. Dalam contoh ini, kami membuat tata letak yang berubah antara empat kolom, dua kolom, dan kolom penuh lebar, tergantung ukuran layar yang berbeda:
Layar besar:
Layar menengah:
Layar kecil:
Contoh
/* Membuat empat kolom yang sama yang berdekatan floating */
.column {
float: left;
width: 25%;
}
/* Pada layar 992px atau kurang, berubah dari empat kolom menjadi dua kolom */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Pada layar yang lebar kurang dari atau sama dengan 600 paksi, jadikan setiap kolom bersalib, bukannya bersambung */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Petikan:metode yang lebih modern untuk membuat tata letak kolom adalah menggunakan CSS Flexbox (lihat contoh di bawah). Namun, Internet Explorer 10 dan versi sebelumnya tidak mendukungnya. Jika perlu dukungan IE6-10, gunakan floating (seperti yang ditunjukkan di atas).
Untuk belajar lebih banyak tentang modul tata letak boks fleksibel, silakan belajar Flexbox CSS di bab ini.
Untuk belajar lebih banyak tentang desain web responsif, silakan belajar Panduan Rancangan Web Ber respons.
Contoh
/* Container boks fleksibel */
.row {
display: flex;
flex-wrap: wrap;
}
/* Membuat empat kolom yang sama */
.column {
flex: 25%;
padding: 20px;
}
/* Pada layar 992px atau kurang, berubah dari empat kolom menjadi dua kolom */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Pada layar yang lebar kurang dari atau sama dengan 600 paksi, jadikan setiap kolom bersalib, bukannya bersambung */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Menyembunyikan elemen menggunakan query media
Penggunaan biasa lainnya untuk query media adalah untuk menyembunyikan elemen di berbagai ukuran layar:
Saya akan menyembunyikan di skrin kecil.
Contoh
/* Jika saiz skrin adalah 600px atau lebih kecil, sembunyikan elemen ini */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Ubah saiz huruf dengan media query
Anda juga dapat menggunakan media query untuk mengubah saiz huruf elemen di berbagai saiz skrin:
Saiz huruf berubah-ubah
Contoh
/* Jika saiz skrin lebih besar daripada 600px, atur saiz huruf <div> menjadi 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Jika saiz skrin adalah 600px atau lebih kecil, atur saiz huruf <div> menjadi 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Pustaka gambar fleksibel
Dalam contoh ini, kami menggunakan media query bersamaan flexbox untuk membuat pustaka gambar berresponsi:
Contoh
Laman fleksibel
Dalam contoh ini, kami menggunakan media query bersamaan flexbox untuk membuat laman ber�� (responsive) yang berisi navigasi fleksibel dan konten fleksibel.
Contoh
Arah: Gambar / Latar
Media query juga dapat digunakan untuk mengubah tata letak halaman berdasarkan arah penjelajah.
Anda dapat menetapkan sekelompok properti CSS yang hanya berlaku saat lebar tinggi layar lebih besar daripada tingginya, yang disebut mode miring:
Contoh
Jika arah berada dalam mode miring, gunakan warna latar belakang kelabu pucat:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Dari lebar minimum ke lebar maksimum
Anda juga dapat mengatur min-width dan max-width properti untuk mengatur lebar minimum dan maksimum.
Contohnya, apabila lebar penjelajah di antara 600px hingga 900px, ubah penampilan elemen <div>:
Contoh
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Penggunaan nilai tambahan: Dalam contoh di bawah, kami menggunakan tanda koma (sebagai operator OR) untuk menambah media query tambahan ke dalam media query yang sudah ada:
Contoh
/* Apabila lebar skrin di antara 600px hingga 900px atau lebih besar daripada 1100px - ubah penampilan <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Panduan Referensi @media CSS
Lengkapnya tentang semua jenis media dan fitur/ekspresi, lihat Aturan @media di Referensi CSS.
Petikan:Untuk mendapatkan pengetahuan lebih lanjut tentang rancangan web ber respons (bagaimana untuk berhadapan dengan berbagai peranti dan skrin) serta penggunaan batas titik kueri media, silakan baca Panduan Rancangan Web Ber respons.
- Hal Sebelumnya CSS 查詢媒體
- Hal Berikutnya Pengenalan RWD
