CSS Media Queries

Bagaimana Media Queries Bekerja

Mungkin beberapa dari Anda masih belum mengenal tentang media queries, jadi mari kita mulai dengan sesuatu yang sangat sederhana. Kunjungi halaman di bawah ini lalu perkecil ukuran layar browser sedikit demi sedikit dan perhatikan!

Lihat Halaman

Seperti yang telah Anda lihat bahwa ukuran layar dapat mengubah warna halaman. Itulah fungsi media queries, yaitu untuk memanipulasi CSS sesuai dengan kondisi layar peramban. Namun, bukan itu fungsi utama dari media queries. Media queries tidak hanya dapat mengubah warna halaman, tetapi juga dapat mengubah layout sebuah website. Dan itu artinya, Anda dapat menciptakan tampilan website sesuka hati Anda dengan mempertimbangkan ukuran viewport yang mungkin akan pengunjung gunakan. Hal ini memungkinkan Anda untuk menciptakan tampilan website yang dinamis, yang dapat menyesuaikan diri dengan tempat dimana website tersebut dibuka. Apakah itu dari komputer, smartphone, tablet, apapun itu:

Contoh Nyata Media Queries

Memulai Konsep

Hal pertama yang harus Anda lakukan adalah membuat konsep sebuah website. Tidak perlu terlalu rumit, pastikan saja Anda menciptakan template yang lengkap dan umum, yang terdiri dari sebuah header, navigasi, artikel, sidebar dan footer. Misalnya seperti ini:

HTML

<div id='outer-wrapper'>

    <div id='header-wrapper'>
        <h1>HEADER WEBSITE</h1>
    </div>

    <div id='nav'>
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>Archive</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Contact</a></li>
        </ul>
    </div>

    <div id='content'>
        <div id='main-wrapper'>
            ARTIKEL DI SINI...
        </div>

        <div id='sidebar-wrapper'>
            WIDGET DI SINI...
        </div>
        <div class='clear'></div>
    </div> <!-- end content -->

    <div id='footer-wrapper'>
        Copyright 2011 - Taufik Nurrohman
    </div>

</div> <!-- end outer-wrapper -->

CSS

h1,h2,h3,h4,h5,h6,ul,ol,li {
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:none;
}

body {
  background:#fff;
  margin:0;padding:0;
  text-align:center;
  font:normal normal 70% Arial,Sans-Serif;
}

#outer-wrapper {
  width:1030px;
  margin:0 auto 0;
  text-align:left;
  background:#ddd;
}

#header-wrapper {
  padding:2%;
  margin:0;
  display:block;
  background:#666;
}

#nav {
  background:#999;
  font:normal normal 1em Arial,Sans-Serif;
  overflow:hidden;
}

#nav ul {
  margin:0;
  padding:0;
  height:auto;
}

#nav ul li {
  margin:0;
  float:left;
  display:inline;
  list-style:none;
}

#nav ul li a {
  display:block;
  padding:5px 10px;
  background:#999;
  color:#fff;
}

#nav ul li a:hover {
  background:#888;
  text-decoration:none;
}

#content {
  clear:both;
  display:block;
}

#main-wrapper {
  width:71%;
  padding:2%;
  word-wrap:break-word;
  overflow:hidden;
  float:left;
  display:inline;
  background:#eee;
}

#sidebar-wrapper {
  width:21%;
  padding:2%;
  word-wrap:break-word;
  overflow:hidden;
  float:right;
  display:inline;
  background:#ddd;
}

#footer-wrapper {
  padding:2%;
  clear:both;
  display:block;
  background:#666;
}

.clear {clear:both}

Di sini saya mengeset lebar #outer-wrapper sebesar 1030px lalu mengeset ukuran #sidebar-wrapper dan #main-wrapper menggunakan persentase. Perhitungan persentase sebuah tampilan website yang ideal dapat Anda pelajari di sini.

Hasil Akhir

Menerapkan Media Queries

Buatlah beberapa peraturan yang tegas:

• Saat ukuran layar telah mencapai 1030 piksel, set lebar #outer-wrapper menjadi 100%. Hal ini akan membuat template menjadi mudah beradaptasi dengan viewport yang lebih sempit dari 1030 piksel.
• Saat lebar viewport lebih kecil dari 600 piksel, set posisi #main-wrapper dan #sidebar-wrapper menjadi elemen blok dalam satu kolom.

Menuliskan lebar sebesar 100% akan mempermudah template dalam beradaptasi, karena persentase tidak diukur berdasarkan keadaan elemen, melainkan berdasarkan tempat dimana elemen tersebut berada. Harap diingat pula beberapa deklarasi penting yang harus Anda terapkan saat menciptakan layout satu kolom.
Seperti yang kita tahu, bahwa untuk menciptakan kolom, deklarasi yang umum digunakan adalah float:left atau float:right, display:inline dan width:N. Maka saat Anda ingin menciptakan layout satu kolom dari elemen yang tadinya berupa dua kolom, hal yang terpenting yang harus Anda lakukan pertama kali adalah netralisasi float dan display. Setelah itu set lebar elemen menjadi auto agar lebar elemen bisa menyesuaikan diri. Setelah itu terserah Anda:

@media screen and (max-width:1030px) {
    #outer-wrapper {
      width:100%;
    }
}

@media screen and (max-width:600px) {
    #sidebar-wrapper,
    #main-wrapper {
      float:none;
      display:block;
      width:auto;
      padding:5%;
    }
}

Gambar Responsif

Untuk membuat gambar menjadi responsif, Anda bisa menambahkan kode ini dalam CSS:

img {
  max-width:100%;
  height:auto;
  width:auto\9; /* IE8 */
}

Hal yang sama juga bisa Anda lakukan untuk embed video dan iframe:

embed,object,iframe {
  width:100%;
  height:auto;
  min-height:300px;
}

Hasil Akhir

---

Meta Tag Skala pada Perangkat Seluler

Secara normal, perangkat seluler yang canggih akan memperkecil skala halaman website saat dibuka. Dengan menggunakan meta tag ini, perangkat tersebut tidak akan menyesuaikan skala halaman dan akan menerapkan skala seperti apa adanya:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Orientasi Viewport

Jika Anda menggunakan tablet atau iPhone maka orientasi dapat berubah secara otomatis dari portrait menjadi landscape atau sebaliknya saat Anda memutarnya. Saya tidak tahu apakah komputer Anda memiliki fasilitas hebat seperti itu atau tidak. Jadi, sekarang coba balik komputer Anda dan lihat apakah orientasinya berubah? :))

@media screen and (orientation:portrait) {
    /* Tampilan Portrait Website Anda */
}

@media screen and (orientation:landscape) {
    /* Tampilan Landscape Website Anda */
}

Masalah Background Image yang terlalu Besar

Tidak seperti gambar pada umumnya, background-image tidak bisa responsif, karena dia adalah gambar yang hanya dijadikan sebagai background sebuah objek, bukan dijadikan sebagai objek itu sendiri. Untuk membuat background-image menjadi responsif, gunakan CSS background-size. Misalnya, di sini Saya akan mengubah skala background menjadi 80% dari ukuran sesungguhnya saat lebar viewport berada pada 480 piksel:

@media screen and (max-device-width:480px) {
    html,body {
      -webkit-background-size:100% auto;
      -moz-background-size:100% auto;
      -ms-background-size:100% auto;
      -o-background-size:100% auto;
      background-size:100% auto;
    }
}

Media Queries pada CSS Eksternal

Bla.. bla.. bla.... Saya yakin Anda sudah mengerti untuk yang satu ini:

<link rel='stylesheet' media='screen and (max-width: 600px)' href='600px-viewport.css'></link>

Max Width, Min Width, Multiple Media Queries

Max Width

Kode di bawah akan mulai mengubah penampilan saat lebar viewport berada pada maksimal 500 piksel dan di bawahnya:

@media screen and (max-width:500px) {
    ...
    ...
}

Min Width

Kode di bawah akan mulai mengubah penampilan saat lebar viewport berada pada minimal 500 piksel dan di atasnya:

@media screen and (min-width:500px) {
    ...
    ...
}

Multiple Media Queries

Kode di bawah ini akan mengubah penampilan apabila lebar viewport berada di antara 500 piksel dan 900 piksel:

@media screen and (min-width:500px) and (max-width: 900px) {
    ...
    ...
}

Device Width

Harap bedakan antara max-width dan max-device-width. max-width dihitung berdasarkan resolusi area, sedangkan max-device-width dihitung berdasarkan resolusi device:

@media screen and (max-device-width:1024px) {
    ...
    ...
}

Media Queries untuk Device Standar

/* Smartphone (portrait & landscape) */
@media only screen
and (min-device-width:320px)
and (max-device-width:480px) {
    ...
    ...
}

/* Smartphone (landscape) */
@media only screen
and (min-width:321px) {
    ...
    ...
}

/* Smartphone (portrait) */
@media only screen
and (max-width:320px) {
    ...
    ...
}

/* iPad (portrait & landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px) {
    ...
    ...
}

/* iPad (landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:landscape) {
    ...
    ...
}

/* iPad (portrait) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:portrait) {
    ...
    ...
}

/* Desktop & laptop */
@media only screen
and (min-width:1224px) {
    ...
    ...
}

/* Large Screen */
@media only screen
and (min-width:1824px) {
    ...
    ...
}

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
    ...
    ...
}

Referensi:

• Web Designer Wall - Responsive Design with CSS3 Media Queries
• Hardboiled CSS3 Media Queries
• 1st Web Designer - How to Use CSS3 Orientation Media Queries
• Developer Mozilla - Using the Viewport Meta Tag to Control Layout on Mobile Browsers
• W3C - Media Queries