CSS Media Query - Contoh

CSS Media Query - Contoh Lebih Banyak

Mari kita lihat contoh lain yang menggunakan pencarian media.

Pencarian media adalah teknologi populer untuk mentransfer gaya yang disesuaikan kepada perangkat yang berbeda.

Berikut adalah contoh sederhana, mari kita ubah warna latar berbeda untuk perangkat yang berbeda:

Pencarian Media CSS

Contoh

/* Atur warna latar body menjadi coklat kehijau */
body {
  background-color: tan;
}
/* Di layar yang kurang dari atau sama dengan 992 pixel, atur warna latar menjadi biru */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* Di layar yang 600 pixel atau lebih kecil, atur warna latar menjadi oliven */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Coba Sendiri

Apakah Anda ingin tahu mengapa kami menggunakan 992px dan 600px dengan akurat? Ini adalah apa yang kita sebut 'penilaian fraktur tipikal' perangkat. Anda dapat melihat di Panduan Desain Web Berresponsif Belajar lebih banyak tentang penilaian fraktur tipikal di C.

Media query menu

Dalam contoh ini, kami menggunakan media query untuk membuat menu navigasi yang berresponsi, yang berbeda di berbagai ukuran layar.

Layar besar:

Layar kecil:

Contoh

/* Kontainer 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 layar yang lebar 600 pixel atau kurang, agar tautan menu bersaling menggiling, bukannya berbaris */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Coba Sendiri

Media query kolom

Penggunaan yang umum dari media query adalah untuk membuat tata letak elastis. 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 menggiling mendekati satu sama lain */
.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 pixel, agar setiap kolom menggiling, bukannya berbaris */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Coba Sendiri

Petunjuk: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 kotak elastis, silakan belajar Flexbox CSS bab ini.

Untuk belajar lebih banyak tentang desain Web responsif, silakan belajar Panduan Desain Web Berresponsif.

Contoh

/* Kontainer kotak elastis */
.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 pixel, agar setiap kolom menggiling, bukannya berbaris */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Coba Sendiri

Menyembunyikan elemen dengan media query

Penggunaan yang umum lain dari media query adalah untuk menyembunyikan elemen di berbagai ukuran layar:

Saya akan menyembunyikannya di layar kecil.

Contoh

/* Jika ukuran layar 600 pixel atau lebih kecil, sembunyikan elemen ini */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Coba Sendiri

Ubah ukuran huruf dengan media query

Anda juga dapat menggunakan media query untuk mengubah ukuran huruf elemen pada berbagai ukuran layar:

Ukuran huruf yang berubah-ubah

Contoh

/* Jika ukuran layar lebih besar daripada 600 pixel, atur ukuran huruf <div> menjadi 80 pixel */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* Jika ukuran layar 600px atau lebih kecil, atur ukuran huruf <div> menjadi 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Coba Sendiri

Pustaka gambar fleksibel

Dalam contoh ini, kami menggunakan media query dengan flexbox untuk membuat pustaka gambar responsif:

Contoh

Coba Sendiri

Situs web fleksibel

Dalam contoh ini, kami menggunakan media query dengan flexbox untuk membuat situs web responsif, termasuk navigasi yang fleksibel dan konten yang fleksibel.

Contoh

Coba Sendiri

Orientasi: Potret / Lanskap

Media query juga dapat digunakan untuk mengubah tata letak halaman berdasarkan orientasi browser.

Anda dapat menetapkan sekelompok atribut CSS yang hanya berlaku saat lebar window browser lebih besar daripada tingginya, yang disebut mode horizontal:

Contoh

Jika orientasi berada di mode horizontal, gunakan warna latar belakang biru terang:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Coba Sendiri

Lebar minimum sampai maksimum

Anda juga dapat menggunakan atribut max-width dan min-width untuk menetapkan lebar minimum dan maksimum.

Contoh, saat lebar browser diantara 600 sampai 900 pixel, 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;
  }
}

Coba Sendiri

Penggunaan nilai tambahan: Dalam contoh di bawah ini, kami menggunakan koma (seperti operator OR) untuk menambahkan media query tambahan ke media query yang sudah ada:

Contoh

/* Saat lebar layar diantara 600 pixel sampai 900 pixel atau lebih besar daripada 1100 pixel - 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;
  }
}

Coba Sendiri

Panduan Referensi @media CSS

Lengkapnya tentang semua jenis media dan fitur/expression, lihat Aturan @media di Referensi CSS.

Petunjuk:Untuk mendapatkan pengetahuan lebih banyak tentang desain web berresponsif (bagaimana merancang untuk berbagai perangkat dan layar) serta penggunaan batas titik kueri media, baca kami Panduan Desain Web Berresponsif.