Media Query dan Responsive Design adalah dua konsep penting dalam CSS yang membantu Anda membuat halaman web yang responsif dan dapat diakses pada berbagai ukuran layar.
Media Query adalah fitur CSS yang memungkinkan Anda menentukan bagaimana halaman web Anda ditampilkan pada berbagai ukuran layar. Anda dapat menentukan peraturan CSS khusus untuk layar desktop, tablet, atau ponsel, misalnya dengan menentukan ukuran font yang berbeda atau menampilkan elemen yang berbeda.
Responsive Design adalah metodologi yang membantu Anda membuat halaman web yang responsif dan dapat diakses pada berbagai ukuran layar. Ini menggunakan konsep seperti Media Query untuk memastikan bahwa halaman web Anda dapat dilihat dengan baik pada layar desktop, tablet, atau ponsel.
Kedua konsep ini sangat penting karena semakin banyak orang mengakses internet melalui perangkat mobile. Dengan membuat halaman web yang responsif, Anda dapat memastikan bahwa konten Anda dapat diakses dan dilihat dengan baik pada berbagai ukuran layar.
Itulah beberapa hal dasar tentang Media Query dan Responsive Design dalam CSS. Anda dapat mempelajari lebih lanjut tentang bagaimana menggunakan teknik ini untuk membuat halaman web yang responsif dan dapat diakses pada berbagai ukuran layar.
Berikut adalah contoh kode CSS yang menggunakan Media Query:
/* Peraturan CSS untuk layar desktop */
body {
font-size: 16px;
}
/* Peraturan CSS untuk layar tablet */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Peraturan CSS untuk layar ponsel */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
Dalam contoh di atas, kita menentukan font-size untuk elemen body pada tiga ukuran layar yang berbeda: desktop, tablet, dan ponsel. Jika layar lebih kecil dari 480px, font-size akan menjadi 12px. Jika layar lebih besar dari 480px tetapi lebih kecil dari 768px, font-size akan menjadi 14px. Dan jika layar lebih besar dari 768px, font-size akan menjadi 16px.
Dengan menggunakan Media Query, kita dapat memastikan bahwa halaman web kita dapat dilihat dengan baik pada berbagai ukuran layar tanpa mempengaruhi tampilan pada ukuran layar lainnya.
0 Komentar