Bagaimana Anda Menulis Kueri Media CSS?

@media layar dan (min-lebar: 1000px) {}

Ini adalah sintaks dari Media Query. Ini dimulai dengan @media untuk membuat Media Query itu sendiri. Selanjutnya, atur jenis media, yang dalam hal ini adalah layar. Jenis ini berlaku untuk layar komputer desktop, tablet, ponsel, dll. Akhiri Media Query dengan fitur media. Dalam contoh kita di atas, yaitu lebar tengah: 1000px. Ini berarti Media Query memulai untuk tampilan dengan lebar minimum 1000 piksel.

Setelah elemen Media Query ini, tambahkan kurung kurawal pembuka dan penutup yang mirip dengan apa yang akan Anda lakukan dalam aturan CSS normal.

Langkah terakhir ke Media Query adalah menambahkan aturan CSS untuk diterapkan setelah kondisi ini terpenuhi. Masukkan aturan CSS ini di antara kurung kurawal yang membentuk Media Query, seperti ini:

 @media screen dan (min-width: 1000px) { body { font-size: 20px; }





instagram viewer

Ketika kondisi Media Query terpenuhi (lebar jendela browser setidaknya 1000 piksel), gaya CSS ini berlaku, mengubah ukuran font situs kami dari 16 piksel yang awalnya kami buat menjadi nilai baru kami 20 piksel. 
 Menambahkan Lebih Banyak Gaya 

Tempatkan sebanyak-banyaknya aturan CSS dalam Media Query ini sesuai kebutuhan untuk menyesuaikan tampilan visual situs web Anda. Misalnya, untuk tidak hanya menambah ukuran font menjadi 20 piksel, tetapi juga mengubah warna semua paragraf menjadi hitam (#000000), tambahkan ini: 
@media screen dan (min-width: 1000px) {
tubuh {
ukuran font: 20px;
}
p {
warna: #000000;
}
}
 Menambahkan Lebih Banyak Kueri Media 

Selain itu, Anda dapat menambahkan lebih banyak Kueri Media untuk setiap ukuran yang lebih besar, memasukkannya ke dalam lembar gaya Anda seperti ini: 
@media screen dan (min-width: 1000px) {
tubuh {
ukuran font: 20px;
}
p {
warna: #000000;
{
}
@media screen dan (min-width: 1400px) {
tubuh {
ukuran font: 24px;
}
}

Media Queries pertama memiliki lebar 1000 piksel, mengubah ukuran font menjadi 20 piksel. Kemudian, setelah browser berada di atas 1400 piksel, ukuran font akan berubah lagi menjadi 24 piksel. Tambahkan Kueri Media sebanyak yang diperlukan untuk situs web khusus Anda. 
 Lebar Min dan Lebar Maks 

Secara umum ada dua cara untuk menulis Kueri Media—dengan menggunakan min-lebar atau dengan lebar maksimum. Sejauh ini, kita telah melihat aksi min-width. Pendekatan ini mengaktifkan Kueri Media setelah browser mencapai setidaknya lebar minimum itu. Jadi kueri yang menggunakan lebar minimum: 1000 piksel berlaku jika lebar browser minimal 1000 piksel. Gaya Media Query ini digunakan saat Anda membangun situs dengan cara yang mengutamakan seluler. 

Jika Anda menggunakan lebar maksimum, ia bekerja dengan cara yang berlawanan. Kueri Media "max-width: 1000px" berlaku setelah browser turun di bawah ukuran ini. 

Kutip Artikel ini.