Apa yang dimaksud dengan Query Media?
permintaan Media adalah teknik CSS diperkenalkan di CSS3.
Ia menggunakan @media aturan untuk memasukkan blok properti CSS hanya jika kondisi tertentu adalah benar.
Contoh
Jika jendela browser lebih kecil dari 500px, warna latar belakang akan berubah menjadi lightblue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Cobalah sendiri " Tambahkan Breakpoint
Sebelumnya dalam tutorial ini kita membuat sebuah halaman web dengan baris dan kolom, dan itu responsif, tapi itu tidak terlihat baik pada layar kecil.
pertanyaan media dapat membantu dengan itu. Kita bisa menambahkan breakpoint di mana bagian-bagian tertentu dari desain akan berperilaku berbeda di setiap sisi breakpoint.
Desktop
Telepon
Menggunakan query media untuk menambahkan breakpoint di 768px:
Contoh
Ketika layar (window browser) mendapat lebih kecil dari 768px, setiap kolom harus memiliki lebar 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Cobalah sendiri " Selalu Desain untuk Ponsel Pertama
Ponsel Pertama berarti merancang untuk mobile sebelum merancang untuk desktop atau perangkat lain (ini akan membuat tampilan halaman lebih cepat pada perangkat yang lebih kecil).
Ini berarti bahwa kita harus membuat beberapa perubahan dalam CSS kami.
Alih-alih mengubah gaya ketika lebar mendapat lebih kecil dari 768px, kita harus mengubah desain saat lebar mendapat lebih besar dari 768px. Ini akan membuat desain kami Ponsel Pertama:
Contoh
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Cobalah sendiri " lain Breakpoint
Anda dapat menambahkan sebanyak breakpoints yang Anda inginkan.
Kami juga akan menyisipkan breakpoint antara tablet dan ponsel.
Desktop
Tablet
Telepon
Kami melakukan ini dengan menambahkan satu query media lebih (pada 600px), dan satu set kelas baru untuk perangkat yang lebih besar dari 600px (tetapi lebih kecil dari 768px):
Contoh
Perhatikan bahwa dua set kelas hampir sama, satu-satunya perbedaan adalah nama ( col- dan col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Cobalah sendiri " Mungkin terasa aneh bahwa kita memiliki dua set kelas identik, tetapi memberi kita kesempatan di HTML, untuk memutuskan apa yang akan terjadi dengan kolom pada setiap breakpoint:
Contoh HTML
Untuk desktop:
Pertama dan bagian ketiga akan baik rentang 3 kolom masing-masing. Bagian tengah akan span 6 kolom.
Untuk tablet:
Bagian pertama akan span 3 kolom, kedua akan span 9, dan bagian ketiga akan ditampilkan di bawah dua bagian pertama, dan itu akan span 12 kolom:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientasi: Portrait / Landscape
query Media juga dapat digunakan untuk mengubah tata letak halaman tergantung pada orientasi browser.
Anda dapat memiliki satu set properti CSS yang hanya akan berlaku ketika jendela browser lebih lebar dari ketinggian, yang disebut "Landscape" Orientasi:
Contoh
Halaman web akan memiliki latar belakang lightblue jika orientasi dalam mode landscape:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Cobalah sendiri "