TokoDaring.Com – Media Query CSS. Membangun situs website yang mobile friendly saat ini bukan lagi menjadi sebuah pilihan. Tetapi telah menjadi kebutuhan dan harus menjadi bagian dari rencana pengembangan bisnis ke depannya.

Artikel Lainnya:
Pilihan Website Builder Terbaik Berdasarkan Spesialisasinya

Sudah sejak lama ketika kami menerbitkan artikel yang spesifik pada coding. Artikel ini lebih bersifat penjelasan secara umum tentang desain responsif dengan menggunakan media query CSS.

Untuk artikel teknis lainnya tentang CSS lihat artikel kategori coding for fun. Atau lihat tiga artikel terakhir pada kategori tersebut.

Desain responsif

Ada banyak cara untuk membuat versi seluler sebuah situs website. Tapi yang paling praktis dan mudah adalah dengan mendesainnya secara responsif menggunakan Media Query CSS untuk perangkat seluler.

Desain responsif menggunakan metode media query CSS memberikan solusi untuk memastikan situs website secara otomatis beradaptasi di semua perangkat dan ukuran layar.

Desain responsif adalah topik sentral dan kompleks, tetapi setelah anda memahami konsepnya, akan membantu anda membuat situs website yang responsif menjadi lebih mudah.

Dalam artikel panjang ini, kami akan menjelaskan apa itu desain responsif ? Cara kerjanya, dan teknologi yang membuatnya dapat berjalan.

Pada artikel ini juga akan di bahas cara menerapkan dan menggunakan metode media query CSS, permasalahan yang terkaitnya dan solusi dari masalah itu.

Apa itu desain responsif (Responsive Design) ?

Google memiliki data yang sangat valid tentang penggunaan perangkat seluler untuk mengakses informasi di internet. Dan mereka mulai menekankan pentingnya situs website yang di desain mobile friendly.

Dan para desainer website mencari solusinya dalam beberapa cara. Pada beberapa tahun lalu, banyak yang memisahkan desain untuk desktop dan seluler.

Dimana desain untuk seluler dibuat pada domain terpisah (m.domain.com), lalu mengalihkan user untuk pergi ke halaman desktop atau seluler tergantung berdasarkan perangkat user.

Sedangkan situs website yang tetap mengabaikan trend yang sedang terjadi pada saat itu harus rela “kalah dalam persaingan” dengan situs website yang di desain responsif.

Adalah Ethan Marcotte yang pada tahun 2010 menggambarkan pendekatan desain situs website yang dapat tetap sesuai dengan perangkat apapun yang digunakan untuk mengaksesnya.

Dan hingga kini, solusi yang disebut ‘desain responsif’ itulah yang paling disukai dan populer hingga kini.

Respon terhadap viewport

Dalam istilah yang lebih teknis, ini berarti bahwa ukuran dan posisi elemen yang ada pada situs website memberikan respons terhadap apa yang disebut viewport.

Viewport adalah area tempat situs yang terlihat oleh pengguna. Tentu saja viewport dibatasi oleh jendela browser tergantung ukuran perangkat yang digunakan.

Tujuan dari desain responsif adalah untuk memberikan pengalaman yang lebih baik ketika mengakses situs website sesuai dengan ukuran viewpoertnya.

Tanpa desain responsif, situs website yang diakses menggunakan ponsel akan kesulitan membaca informasi yang ada.

Dulu mungkin anda ingat ketika mengakses situs website dengan cara memperbesar (zoom), menggeser ke kiri dan ke kanan atau mengubah ukuran.

Bagaimana cara kerja desain responsif ?

Desain responsif didasarkan pada beberapa prinsip utama. Yang paling penting adalah penggunaan ukuran proporsional daripada ukuran absolut.

Itu berarti elemen situs website dinyatakan dalam persentase dan pengukuran responsif lainnya, bukan unit-unit static seperti piksel (px).

Ini adalah contoh bagaimana ukuran elemen pada situs website di deklarasikan menggunakan CSS:

.content {
  width: 780px;
}

Yang menjadi masalah adalah deklarasi ukuran dengan cara tersebut akan menghasilkan grid yang kaku, sementara grid telah menjadi struktur utama situs website termasuk header, footer, konten, sidebar, dan lain-lain.

Ketikan situs tersebut di akses isi dalam elemen content tersebut tetap akan memiliki lebar sepanjang 780px, dan menjadi masalah ketika di akses dengan perangkat ponsel.

Kini, kita telah menemukan apa yang disebut Fluid Grid yang menggunakan pengukuran proporsional sehingga dapat menyesuaikan dengan ukuran viewpoert yang digunakan.

Contohnya adalah dengan menggunakan persentase seperti berikut:

.content {
  width: 70%;
}

CSS dalam desain website

Anda pasti tau bahwa deklarasi kode di atas adalah menggunakan apa yang disebut dengan kode CSS, dan itu adalah inti dari desain responsif saat ini.

CSS bukan dikatakan sebagai bahasa pemrograman tetapi CSS adalah bagian penting dalam penataan sebuah situs website.

Sementara HTML yang membuat element dan menjadikannya sebagai kerangka website dan JavaScript digunaan untuk menambah fungsionalitas.

Ketika anda mengunjungi sebuah desain website dengan warna yang bagus, jenis huruf yang juga bagus, itu lebih karena peran daripada CSS.

CSS memang menjadi sangat penting karena dapat menentukan ukuran objek. Tetapi bagian dari CSS yang lebih penting karena dapat melakukan penyesuaian terhadapa viewport adalah media query CSS.

Media Query CSS dalam desain website responsif

Media query adalah teknik CSS yang diperkenalkan pada CSS3. Ini menggunakan aturan @media untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar.

Media query adalah operator yang memungkinkan desain website dan pengembangannya dapat menambahkan gaya (stylesheet) sesuai kondsinya.

Misalnya, memberi tahu browser untuk menggunakan warna yang berbeda ke elemen HTML berdasarka pada resolusi layar atau orientasi browser (landscape atau portrait).

Penggunaan media query pada hal yang umum misalnya untuk menempatkan posisi sidebar di bagian bawah konten ketika halaman di akses menggunakan ponsel.

Atau widget footer yang pada layar desktop biasanya berjajar menyamping, namun ketika di akses menggunakan ponsel, widget tersebut menjadi bertumpuk ke bawah.

Selain media query, ada pertimbangan CSS yang tidak kalah penting. Yaitu gambar, harus dapat beradaptasi dengan viewport dimana element gambar itu terlihat.

Biasanya, ini bisa di lakukan dengan mengatur lebar maksimumnya ke 100%:

.image {
  height: auto;
  max-width: 100%;
}

Atribut srcset pada WordPress

Pada situs website WordPress, sudah ada solusi untuk memuat gambar dengan cepat. Pada versi WordPress 4.4 terdapat penambahan dukungan gambar responsif asli dengan menyertakan atribut srcset dan ukuran ke markup gambar yang dihasilkannya.

Ini yang memungkinkan browser secara otomatis menyajikan ukuran gambar sekecil mungkin dengan menggunakan atribut srcset.

Atribut srcset dapat menentukan URL gambar untuk digunakan dalam situasi yang berbeda. Atribut ini diperlukan ketika tag <source> digunakan pada <picture>.

Menggunakan atribut HTML srcset akan dapat menghemat bandwidth, yang membuat loading halaman menjadi lebih cepat. Contoh penggunaannya adalah seperti berikut:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Dimana menempatkan Media Query ?

Untuk website yang dibuat menggunakan WordPress, media query paling umum dapat di tempatkan (di tulis) di dalam file style.css. di dalam folder tema WordPress.

Jika anda menginginkan style yang berbeda dari pengaturan pengembang tema yang anda gunakan, maka anda bisa menuliskan tambahan kode CSS di dalam menu customizer.

Semua tambahan kode CSS yang ditulis melalui menu additional CSS customizer akan menimpa semua aturan yang sudah di tulis sebelumnya oleh pengembang tema.

Misalnya, pengembang tema yang anda gunakan sudah menentukan ukuran huruf yang digunakan, baik untuk layar desktop atau seluler dengan ukuran 16px.

Ketika anda menginginkan ukuran tersebut menjadi lebih besar pada layar ponsel menjadi 20px, maka itu dapat dilakukan dengan contoh berikut:

Jadi, jika ukuran font standar adalah 18px (seperti yang didefinisikan di dalam file style.css).

Maka anda dapat mengubah ukuran font untuk layar yang lebih kecil dengan menambahkan media query seperti contoh berikut:

@media only screen and (max-width: 480px) {
  body {
    font-size: 20px;
  }
}

Cara menggunakan Media Query pada semua perangkat

Kembali kepada bahasan tentang Media Query CSS. Yaitu bagaimana cara menggunakan media query CSS.

Sebelum membahas media query secara lebih spesifik, penting untuk terlebih dahulu memahami seperti apa tampilannya.

Jika misalnya anda menggunakan WordPress sebagai website bisnis atau blog, dan menggunakan tema yang responsif, maka pasti menemukan sebuah file yang dinamakan style.css.

File style.css dapat anda temukan di dalam folder tema yang digunakan. Anda mungkin akan melihat kode yang di tuliskan seperti berikut: @media only screen and (max-width: 480px). atau @media only screen and (min-width: 768px)

Akan banyak syntax yang di tulis dengan @media yang menentukan kondisi style untuk berbagai jenis media atau perangkat.

Sedangkan only screen ketentuan berikutnya yang berlaku untuk layar komputer, tablet, dan lain-lain sesuai ukuran layar dari perangkat yang digunakan.

Dan max-width: dan min-width: digunakan untuk menargetkan rentang ukuran layar tertentu. Keduanya dapat digunakan untuk menargetkan perangkat tertentu dengan lebar yang diketahui.

Dalam CSS media query untuk semua perangkat, min dan maks juga dapat digunakan secara bergantian

Secara keseluruhan, format ini adalah media query yang paling umum yang di temukan dalam desain responsif.

Media query untuk perangkat seluler (handphone)

Media query seperti di atas (max-width: 480px) sudah dapat digunakan untuk mengubah gaya situs website untuk tampilan layar handphone.

Tetapi anda mungkin ingin menargetkan menargetkan perangkat tertentu, berdasarkan merk handphone dan tipenya, seperti Google pixel atau iPhone.

Contoh berikut adalah contoh deklarasi CSS media query untuk tipe iPhone X untuk mode landscape maupun portrait:

/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Masih dalam artikel ini, kami akan contohkan beberapa ukuran layar dan breakpoint secara umum, misalnya tablet, iPad, dan desktop.

Untuk melihat rentang ukuran layar berdasarkan jenis dan model ponsel, lihat halaman kami berikut untuk menemukan ukuran layar yang tepat.

Media Query untuk Tablet

Seperti halnya smartphone, ada berbagai macam ukuran layar tablet. Tetapi secara umum (ukuran umum untuk tablet) itu dapat menggunakan media query CSS seperti contoh berikut:

@media only screen and (min-width: 768px) and (max-width: 1024px)

Media Query untuk iPad

Orang menganggap bahwa iPad merupakan sebuah tablet. Tetapi secara teknis, Apple tidak mengkategorikannya sebagai tablet.

Beruntung, bahwa media query untuk menargetkan iPad adalah dengan menggunakan kueri yang sama untuk hampir semua generasi iPad.

Mulai dari iPad 1 hingga iPad Mini anda dapat menggunakan baris CSS media query berikut:

@media only screen and (min-width: 768 piksel) and (max-width: 1024px)

Kode CSS di atas dapat digunakan untuk orientasi baik landscape dan portrait. Sedangkan untuk menargetkan iPad Pro sesuaikan max-device-width menjadi 1366px.

Media Query untuk Desktop

Layar desktop adalah layar yang paling besar. Kebanyakan desain website pada umumnya mendeklarasikan kode CSS untuk berlaku pada layar desktop terlebih dahulu, baru menuliskan kode CSS untuk layar yang lebih kecil seperti contoh-contoh di atas.

Kecuali anda benar-benar menginginkan pendekatan mobile-first design dan memang itu yang sebenarnya lebih direkomendasikan.

Menggunakan media query responsif adalah ide yang bagus karena anda ingin memberikan Pengalaman Pengguna (UX) yang solid baik tampilan maupun kecepatan.

Mengubah ukuran browser memang memiliki pengaruh yang besar terhadap layout dan fungsi situs website. Memasukkan media query CSS untuk desktop sebenarnya dapat mencegah distorsi.

Dalam kasus-kasus pada umumnya, sebenarnya lebih masuk akal untuk menentukan media query berdasarkan ukuran layar yang populer, daripada tipe-tipe perangkat tertentu.

Ukuran layar yang paling umum

Ada banyak perangkat berdasarkan produsennya dan masing-masing memiliki ukuran lebar, tinggi, resolusi, dan orientasi yang berbeda-beda.

Jadi, penting sekali untuk menentukan pada titik mana anda ingin mengubah desain ? Untuk menjawab pertanyaan-pertanyaan itu, pertama-tama mari kita lihat beberapa statistik.

Untuk mengetahui media query responsif yang tepat untuk semua perangkat, coba lihat statistik ukuran perangkat saat ini.

Berikut ini adalah ukuran layar paling populer berdasarkan StatCounter di tahun 2020:

360px × 640px : 11,93%
1366px × 768px : 8,95%
1920px × 1080px : 8,28%
375px × 667px : 4,28%
414px × 896px : 3,24%
Ukuran lainnya : 39,33%

Dari satistik di atas, dapat di simpulkan bahwa yang terbaik adalah menggunakan tiga ukuran umum, yaitu : ponsel, tablet dan desktop.

Maka akan menjadi lebih mudah untuk mencari tahu breakpoint. Breakpoint adalah sesuatu yang akan ditambahkan ke dalam media query.

Jika menggunakan tiga ukuran layar, maka anda dapat menambahkan dua titik putus, yaitu:

768px dan 360px.
640px dan 1080px.

Permasalahan umum terkait Media Query CSS

Anda mungkin baru dalam menyelami media query dan mengalami beberapa masalah, seperti desain atau gaya yang tidak berjalan sebagaimana mestinya.

Berikutnya adalah beberapa masalah paling umum yang mungkin terjadi saat mendeklarasikan media query untuk beberapa perangkat:

Media query Umumnya Tidak Berfungsi
Media query untuk Desktop Tidak Berfungsi
Media query Seluler Tidak Berfungsi

Media query Umumnya Tidak Berfungsi

Jika deklarasi media query tidak bekerja, hal pertama yang harus diperiksa adalah apakah kueri yang ditambahkan tersebut di tambahkan pada tempat yang benar.

Seperti yang sudah disebutkan pada beberapa paragraf di atas, bahwa deklarasi harus berada di bagian akhir stylesheet yang sudah ada sebelumnya untuk merubah deklarasi sebelumnya.

Berikutnya bahkan kesalahan pengetikan (typo) baik selector CSS maupun properties CSS akan membuat deklarasi CSS di abaikan.

Kemungkinan masalah lainnya adalah, pengembang tema website yang anda gunakan mungkin menggunakan metode inline CSS.

Metode inline CSS artinya langsung di dalam kode HTML untuk mendapatkan kecepatan loading. Solusinya adalah menghapus kode CSS sebaris (inline) tersebut atau gunakan !important.

Media Query desktop tidak berfungsi

Sebaliknya kueri untuk layar yang lebih kecil mungkin bekerja tetapi tidak berfungsi di layar komputer desktop. Masalahnya, anda mungkin telah menyetel media query untuk perangkat-perangkat khusus.

Penting untuk dicatat bahwa max-device-width dan max-width tidaklah memiliki fungsi yang sama. max-device-width akan bekerja untuk ukuran layar dan bukan ukuran viewport.

Anda mungkin menggunakan max-device-width, Dan pada kebanyakan kasus menggunakan max-width sudah cukup untuk memperbaiki kesalahan.

Media Query seluler tidak berfungsi

Ini yang sering terjadi, dimana kueri dapat berfungsi dengan baik pada browser desktop tetapi tidak bekerja pada layar ponsel.

Masalahnya mungkin simple karena meta viewport dan zoom default tidak terdapat di dalam header website anda.

Coba cek di dalam file header.php dan tambahkan kode/tag <meta> berikut di antara <head> dan </head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Kode atau tag <meta> tersebut akan memberikan informasi pada browser untuk merender halaman sesuai dengan lebar perangkat.

Menambahkan tag tersebut sering kali berhasil untuk membuat breakpoint pada perangkat seluler. Kesalahan lainnya juga mungkin kesalahan atau typo pada selector, properties atau kesalahan pengambilan rentang ukuran.

Media Query CSS

Table of Contents