Desain Web Responsif - Kueri Media
Apa itu Kueri Media?
Media query adalah teknik CSS yang diperkenalkan di CSS3.
Ini menggunakan @media
aturan untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar.
Contoh
Jika jendela browser berukuran 600 piksel atau lebih kecil, warna latar belakang akan menjadi biru muda:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Tambahkan Breakpoint
Sebelumnya dalam tutorial ini kami membuat halaman web dengan baris dan kolom, dan responsif, tetapi tidak terlihat bagus di layar kecil.
Kueri media dapat membantu dengan itu. Kita dapat menambahkan breakpoint di mana bagian tertentu dari desain akan berperilaku berbeda di setiap sisi breakpoint.
Desktop
Telepon
Gunakan kueri media untuk menambahkan breakpoint pada 768px:
Contoh
Ketika layar (jendela browser) menjadi 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%;
}
}
Selalu Desain untuk Seluler Pertama
Mobile First berarti mendesain untuk seluler sebelum mendesain 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 pada CSS kita.
Alih-alih mengubah gaya saat lebar menjadi lebih kecil dari 768px, kita harus mengubah desain saat lebar menjadi lebih besar dari 768px. Ini akan membuat desain kami Mobile First:
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%;}
}
Breakpoint lain
Anda dapat menambahkan breakpoints sebanyak yang Anda suka.
Kami juga akan memasukkan breakpoint antara tablet dan ponsel.
Desktop
Tablet
Telepon
Kami melakukan ini dengan menambahkan satu kueri media lagi (pada 600 piksel), dan satu set kelas baru untuk perangkat yang lebih besar dari 600 piksel (tetapi lebih kecil dari 768 piksel):
Contoh
Perhatikan bahwa dua set kelas hampir identik, satu-satunya perbedaan adalah nama ( col-
dan col-s-
):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-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%;}
}
Mungkin tampak aneh bahwa kami memiliki dua set kelas yang identik, tetapi ini memberi kami kesempatan dalam HTML , untuk memutuskan apa yang akan terjadi dengan kolom di setiap breakpoint:
Contoh HTML
Untuk desktop:
Bagian pertama dan ketiga masing-masing akan mencakup 3 kolom. Bagian tengah akan mencakup 6 kolom.
Untuk tablet:
Bagian pertama akan mencakup 3 kolom, yang kedua akan mencakup 9, dan bagian ketiga akan ditampilkan di bawah dua bagian pertama, dan akan mencakup 12 kolom:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Breakpoints Perangkat Khas
Ada banyak sekali layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga sulit untuk membuat titik henti sementara yang tepat untuk setiap perangkat. Untuk mempermudah, Anda dapat menargetkan lima kelompok:
Contoh
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientasi: Potret / Lanskap
Kueri 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 tingginya, yang disebut orientasi "Lanskap":
Contoh
Halaman web akan memiliki latar belakang biru muda jika orientasinya dalam mode lanskap:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Sembunyikan Elemen Dengan Kueri Media
Penggunaan umum lainnya dari kueri media, adalah untuk menyembunyikan elemen pada ukuran layar yang berbeda:
Contoh
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Ubah Ukuran Font Dengan Kueri Media
Anda juga dapat menggunakan kueri media untuk mengubah ukuran font elemen pada ukuran layar yang berbeda:
Ukuran Font Variabel.
Contoh
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Referensi CSS @media
Untuk gambaran lengkap tentang semua jenis dan fitur/ekspresi media, silakan lihat aturan @media di referensi CSS kami .