Rancangan Situs Respon - Kueri Media

Apa itu media query?

Media query adalah teknologi CSS yang diperkenalkan dalam CSS3.

Hanya digunakan saat memenuhi kondisi tertentu @media Aturan untuk merujuk blok atribut CSS.

Contoh

Jika lebar jendela browser adalah 600px atau kurang, warna latar belakang menjadi biru pucat:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Coba Sendiri

Tambahkan batas putar

Di awal tutorial ini, kami membuat halaman web yang mengandung baris dan kolom, tetapi halaman responsif ini terlihat buruk di layar kecil.

Media query dapat membantu Anda. Kita dapat menambahkan batas putar di mana beberapa bagian desain akan berperan berbeda di setiap sisi batas putar.


Komputer meja

Ponsel

Tambahkan batas putar di 768px menggunakan media query:

Contoh

Ketika layar (jendela browser) kurang daripada 768px, lebar setiap kolom seharusnya 100%:

/* Penjelasan untuk perangkat meja: */
.col-1 {lebar: 8.33%;}
.col-2 {lebar: 16.66%;}
.col-3 {lebar: 25%;}
.col-4 {lebar: 33.33%;}
.col-5 {lebar: 41.66%;}
.col-6 {lebar: 50%;}
.col-7 {lebar: 58.33%;}
.col-8 {lebar: 66.66%;}
.col-9 {lebar: 75%;}
.col-10 {lebar: 83.33%;}
.col-11 {lebar: 91.66%;}
.col-12 {lebar: 100%;}
@media only screen and (max-width: 768px) {
  /* Untuk ponsel: */
  [class*="col-"] {
    lebar: 100%;
  }
}

Coba Sendiri

Selalu desain Mobile First

Mobile First berarti sebelum merancang untuk komputer meja atau perangkat lainnya, prioritas merancang untuk perangkat ponsel (ini akan membuat halaman menampilkan lebih cepat di perangkat yang kecil).

Artinya kami harus melakukan beberapa peningkatan dalam CSS.

Ketika lebar kurang daripada 768px, kami seharusnya mengubah desain daripada mengubah lebar. Kita melakukan desain 'pertama mengutamakan ponsel' seperti ini:

Contoh

/* Untuk ponsel: */
[class*="col-"] {
  lebar: 100%;
}
@media only screen and (min-width: 768px) {
  /* Untuk desktop: */
  .col-1 {lebar: 8.33%;}
  .col-2 {lebar: 16.66%;}
  .col-3 {lebar: 25%;}
  .col-4 {lebar: 33.33%;}
  .col-5 {lebar: 41.66%;}
  .col-6 {lebar: 50%;}
  .col-7 {lebar: 58.33%;}
  .col-8 {lebar: 66.66%;}
  .col-9 {lebar: 75%;}
  .col-10 {lebar: 83.33%;}
  .col-11 {lebar: 91.66%;}
  .col-12 {lebar: 100%;}
}

Coba Sendiri

Batas putar lainnya

Anda dapat menambahkan batas putar sebanyak yang Anda inginkan.

Kami juga akan memasukkan batas putar antara tablet dan ponsel.


Komputer meja

Tablet

Ponsel

Untuk hal ini, kami menambahkan media query (pada 600 paksi), dan menambahkan set baru kelas untuk perangkat yang lebih besar daripada 600 paksi (tetapi kurang daripada 768 paksi):

Contoh

Perhatikan, dua kelompok kelas hampir sama, perbedaan tunggal adalah nama (col- dan col-s-):

/* Untuk ponsel: */
[class*="col-"] {
  lebar: 100%;
}
@media only screen and (min-width: 600px) {
  /* Untuk tablet: */
  .col-s-1 {lebar: 8.33%;}
  .col-s-2 {lebar: 16.66%;}
  .col-s-3 {lebar: 25%;}
  .col-s-4 {lebar: 33.33%;}
  .col-s-5 {lebar: 41.66%;}
  .col-s-6 {lebar: 50%;}
  .col-s-7 {lebar: 58.33%;}
  .col-s-8 {lebar: 66.66%;}
  .col-s-9 {lebar: 75%;}
  .col-s-10 {lebar: 83.33%;}
  .col-s-11 {lebar: 91.66%;}
  .col-s-12 {lebar: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Untuk desktop: */
  .col-1 {lebar: 8.33%;}
  .col-2 {lebar: 16.66%;}
  .col-3 {lebar: 25%;}
  .col-4 {lebar: 33.33%;}
  .col-5 {lebar: 41.66%;}
  .col-6 {lebar: 50%;}
  .col-7 {lebar: 58.33%;}
  .col-8 {lebar: 66.66%;}
  .col-9 {lebar: 75%;}
  .col-10 {lebar: 83.33%;}
  .col-11 {lebar: 91.66%;}
  .col-12 {lebar: 100%;}
}

Ada dua kelompok kelas yang sama terasa aneh, tetapi ini memberikan kesempatan bagi kami untuk memutuskan apa yang terjadi dengan kolom di setiap titik perebutan lebar layar menggunakan HTML:

Contoh HTML

Untuk desktop:

Bagian pertama dan ketiga akan melintasi 3 kolom. Bagian tengah akan melintasi 6 kolom.

Untuk tablet:

Bagian pertama akan melintasi 3 kolom, bagian kedua akan melintasi 9 kolom, bagian ketiga akan ditampilkan di bawah bagian pertama dan kedua, dan akan melintasi 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>

Coba Sendiri

Poin batas perangkat tipikal

Ada banyak layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga sulit membuat batas yang akurat untuk setiap perangkat. Untuk kecepatan, Anda dapat menargetkan lima kelompok ini:

Contoh

/* Perangkat super kecil (telepon, 600px dan di bawah) */
@media only screen and (max-width: 600px) {...} 
/* Perangkat kecil (tablet vertikal dan handphone besar, 600 piksel dan di atas) */
@media only screen and (min-width: 600px) {...} 
/* Perangkat menengah (tablet horizontal, 768 piksel dan di atas) */
@media only screen and (min-width: 768px) {...} 
/* Perangkat besar (laptop/desktop, 992px dan di atas) */
@media only screen and (min-width: 992px) {...} 
/* Perangkat super besar (laptop besar dan desktop, 1200px dan di atas) */
@media only screen and (min-width: 1200px) {...}

Coba Sendiri

Orientasi: Potret / Panorama

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

Anda dapat menetapkan beberapa properti CSS, properti ini hanya berlaku saat lebar jendela browser lebih besar daripada tingginya, disebut arah 'horizontal':

Contoh

Jika mode orientasi adalah mode horizontal (landscape mode), latar belakang halaman berwarna biru muda:

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

Coba Sendiri

Sembunyikan elemen dengan media query

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

Contoh

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

Coba Sendiri

Ubah ukuran font dengan media query

Anda juga dapat menggunakan media query untuk mengubah ukuran font elemen di berbagai ukuran layar:

Contoh

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

Coba Sendiri

Panduan Referensi @media CSS

Untuk penjelasan yang lengkap tentang semua tipe media dan fitur/ekspresi, silakan lihat Lihat @media rule di Panduan Referensi CSS.