Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Desain Web Responsif - Kueri Media


Apa itu Kueri Media?

Media query adalah teknik CSS yang diperkenalkan di CSS3.

Ini menggunakan @mediaaturan 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:

Saya akan disembunyikan di layar kecil.

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 .