CSS Media Queries

Tabel Konten
  1. Bagaimana Media Queries Bekerja 
  2. Memulai Konsep 
    1. HTML 
    2. CSS 
  3. Menerapkan Media Queries 
  4. Gambar Responsif 
  5. Meta Tag Skala pada Perangkat Seluler 
  6. Orientasi Viewport 
  7. Masalah Background Image yang terlalu Besar 
  8. Media Queries pada CSS Eksternal 
  9. Max Width, Min Width, Multiple Media Queries 
    1. Max Width 
    2. Min Width 
    3. Multiple Media Queries 
    4. Device Width 
  10. Media Queries untuk Device Standar 
  11. Referensi: 
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: 

48 Komentar

  • Unknown

    boleh juga nih bang thank you

  • Taufik Nurrohman

    @Zh!nTho: Sama-sama.. :D

  • Blog Of Friendship

    mantap sob!

  • dhenycahyoe

    wah saya selama ini cuma menerapkan media queries untuk device standart saja, gak tahu-nya bisa sebanyak itu, halaman blog saya masih belum banyak yg responsive secara sempurna perlu waktu untuk menentukan besar kecil-nya ukuran resolsi yg dipakai, thank's sob artikelnya ijin Ctrl+D dulu :D

  • Taufik Nurrohman

    @Deny E.Wicahyo: Pas pertama kali Saya menelusuri tutorial-tutorial semacam ini sampai bisa jadi artikel ini juga sempat kaget dengan semuanya.

  • Ijal Fauzi

    Thanks mas, saya juga sedang pelajari ini.

  • Sodikin Kurniawan

    Makasih...

  • Anonim

    Mas perasaan aq cob nih ndak berhasil2 deh?

  • Taufik Nurrohman

    @The7Bloggers Yang penting selalu tempatkan @media di bagian paling bawah pada file CSS.

  • ICHINK.WEB.ID

    Wah pengin banget theme ku bisa responsif juga mas, tapi kok ribet banget kayaknya nih.
    Kalo buat pemula seperti saya harus mulai dari mana nih mas?

  • Anonim

    kalo template biasa apakah bisa dijadikan responsive juga??

  • Taufik Nurrohman

    @Manusia Biasa Kalau mas punya Firebug atau aplikasi sejenis bisa mencoba meng-inspect-element pada semua elemen halaman. Maksudnya supaya tahu terlebih dahulu seluk-beluk elemen yang telah membangun sebuah situs/blog:

    Kebanyakan orang kesulitan mempelajari ini karena mereka belum paham betul dengan elemen-elemen yang membangun blog/situs mereka sehingga usaha untuk menargetkan kode CSS jadi bertambah sulit.
    "Saya mau membuat elemen ini jadi responsif, tapi kode CSS untuk elemen ini yang mana ya?"
    Itu adalah pertanyaan yang biasanya muncul. Gambaran susahnya begini:

    Seseorang tidak akan bisa mengubah kepribadian orang lain jika dia sendiri belum memahami seluk-beluk tentang orang tersebut, kepribadian dan latar belakang bagaimana dia hidup dan berdiri :)

    Atau untuk alternatif lain bisa menggunakan ini: hompimpaalaihumgambreng.blogspot.com/2012/02/download-kerangka-template-blogger.html

  • Taufik Nurrohman

    @sahadena Apa mas tidak tahu kalau template Saya ini juga tadinya template biasa? Dan Saya juga tidak membuat template ini dari template unduhan dari luar. Saya menggunakan template bawaan asli dari Blogger.com dan memodifikasinya sampai sejauh ini :)

  • ICHINK.WEB.ID

    @Taufik Nurrohman
    Wah makasih masukannya mas Taufik, berarti harus paham dulu selektor dan id yang digunakan dalam theme kita yah,
    linknya yang bawah kok gak bisa diklik mas?

  • Taufik Nurrohman

    @Manusia Biasa Sekarang sudah bisa. Sebenarnya sih itu bukan link, cuma elemen lain yang dimanipulasi jadi link dengan JavaScript hehe.. :D

  • Rifqi Pratama

    Wah.. baru tau ada yang seperti ini. Makasih mas infonya walaupun saya masih bingung cara menerapkannya :p

  • Putra

    sumvah blog ini saya coba resize browsernya persis yg dijabarkan sma mas taufik, wow kerenn bgt \o/ \o/

    pengen coba build aah, dikit2 tp pasti :)
    tapi saya masih bingung nerapinnya mas 7:(

  • Putra

    mas, kalau pas widthnya 600 kebawah jadi satu kolom gmn?? sudah saya coba, tpi knp width main sama sidebarnya melebihi outer yah?? :(

    #terima kasih sebelumnya mas :) :-bd

  • Taufik Nurrohman

    @Alam Perwira Di sini Saya menerapkannya pada elemen #main-wrapper dan #sidebar-wrapper. Jika ukuran layar telah mencapai kurang dari 600 piksel, netralkan semua deklarasi float, display dan width sehingga bagian sidebar dan artikel akan memposisikan diri sebagai blok bersusun dari atas ke bawah, bukan lagi menyamping seperti sebelumnya:

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

    @Alam Perwira Di sini Saya menerapkannya pada elemen #main-wrapper dan #sidebar-wrapper. Jika ukuran layar telah mencapai kurang dari 600 piksel, netralkan semua deklarasi float, display dan width sehingga bagian sidebar dan artikel akan memposisikan diri sebagai blok bersusun dari atas ke bawah, bukan lagi menyamping seperti sebelumnya:

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

    @Taufik Nurrohmankok malah main-wrapper sama sidebar-wrapper melebihi outer-wrapper yah mas?? 7:( 7:(

  • 3CODE

    Mantap mas Taufik..! :-bd
    Ini tutorial yg saya cari-cari.. :D

  • Unknown

    Mau tanya nich Om Taufic Meta Tagnya di letak di < head > atau dimana nich om? Masih bingung dengan responsive but i still want to learn...

  • Taufik Nurrohman

    @Zul Fikar Di atas </head>:

    ...
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    </head>
  • Andy Nur

    Ini dia yg mau saya pelajarin,
    ternyta namax media queries toh.
    mantep deh, smga nanti ilmu saya 11 12 ama mas taufiq :D

  • Unknown

    Nyari nyari sampai ke blognya bule-bule,,,ternyata di sini ada yang lebih lengkap plus bahasa Indonesia,,,

    Ijin ctrl + d dulu mas,,,mau tak coba tak terapin di template blog ku...

  • Unknown

    mas mau nanya nih kode yang disisipka pada blog demo cman ini y
    @media screen and (max-width:1030px) {
    #outer-wrapper {width:100%;}
    }

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

  • Unknown

    syaratnya apa ya biar bisa nerapin?
    soalnya gak berhasil2 :'(

  • Anonim

    gimana cara nerapin di template bawaan blogger, gak tau bagian-bagiannya, mohon di cerahkan

    • Taufik Nurrohman

      Sayangnya, sesuai label level tutorial pada pita di atas (Tingkat Lanjut), di sini kita tidak akan membicarakan mengenai template bawaan maupun teknik-teknik modifikasi untuk template yang sudah ada. Ini murni harus dibangun dari awal sampai akhir.

  • azewBz

    mas`klau saya pasang sidebar di blog saya bisa ga?
    soalnya sya udah coba tutorial blog lain tidak berhasil

    mungkin mas taufik bisa membantu :D

  • AJ Super Moderator

    Wah klo pake ini jadi kita tidak perlu buat template untuk mobile device ya..
    kan templatenya sudah bisa menyesuaikan sendiri.. :-bd
    Tapi pertanyaannya saya menggunakan blog wp.
    walaupun begitu kayaknya bisa nih di aplikasikan ke wp. :yaya:

    www.30menit.web.id

  • EM

    siap untuk diterapkan.
    terima kasih.

  • Wibi Alwi Surya Kuncoro

    thanks infonya

  • ibnu

    Ane mau tanya gan ... cara membuat supaya setelah kita comment maka otomats diberi tanda seperti pada blog anda ...??? tolong jawabannya

  • Anonim

    Wah.... bikin pusing memodifikasi template menjadi responsive, dengan semangat 45 dan mengikuti cara diatas tahap demi tahap akhirnya berhasil, makasih banyak atas tutorialnya ya kak ?

  • Unknown

    Saya kira template responsif baru baru ini, ternyata sudah lama, seperti pada artikel Mas Taufik ini, artikel ini dibuat ditahun 2011, berarti sudah saya sudah tertinggal jauh :\
    Dan saya juga sangat kagum kepada anda Mas, blog DTE :] ini berasal dari template bawaan blogger, hebat Mas \o/

    Dengan ini saya putuskan untuk mengganti template saya (yang modifikasi karya orang lain) ke template bawaan blogger sendiri. Sehingga nantinya saya mengetahui seluk beluk template sendiri.

    Jika nantinya saya ada kesulitan, tolong dibantu ya Mas Taufik ^_^
    Matur nuwun

    • Taufik Nurrohman

      Itu template yang dulu, yang paling pertama kali. Sekarang sudah lain lagi ceritanya. Saya sudah tidak lagi bongkar-pasang-bongkar-pasang tema orang lain. Sekarang sudah masuk versi dua, semoga bisa jadi versi yang terakhir.

      Saya usahakan untuk membantu sebisa Saya, jika Saya ada waktu luang lagi seperti ini.

  • Unknown

    kalo untuk perbedaan @media screen dengan @media only screen apa ya?

    • Taufik Nurrohman

      Kalau ditambah kata kunci only, maka kode CSS yang ada di dalam braket tersebut hanya akan berlaku ketika halaman tampil di layar. Semisal halaman ini ditampilkan pada media yang lain, misalnya pada media print, maka kode CSS tersebut tidak akan diterjemahkan. Misalnya seperti blog ini. Coba buka blog ini pakai Google Chrome lalu ambil perintah untuk mencetak halaman.

  • Unknown

    Mas, bisa gak menonaktifkan code javascript memakai media queries , ex: javascript lagi berjalan dan saya scroll zoom ke ukuran 1024px , maka otomatis scriptnya berhenti bekerja... ?

  • Unknown

    Kalau disable javasript di mediaQuery gimana caranya mas taufik ? misalnya disable javascript stickywidget di media query width 800px ke bawah.

  • Putra

    Semisal ada dua queries:
    queries 768-1024
    queries 320-480

    brati antara 480-768 itu gkda perlakuan dari queries mas? Trus kalo semisal perlakuan dari queries 768-1024 diturunkan ke queris bawahnya (dibawah 768), apakah harus menulis ulang isi queris dari 768-1024 mas?

    tanya lagi, kalo layoutnya satu kolom,kan gak terlalu ribet mas. Semisal dijadiin satu queries 320-(lebar layout), apakah itu lebih baik dibanding satu persatu atau bagaimana? minta saran mas :\

    • Taufik Nurrohman

      Berarti antara 480 – 768 itu tidak ada perlakuan dari kueri mas?

      Ya. Contoh diagramnya adalah seperti ini, di sini Saya membuat parameter dari 100 – 120 dan 140 – 160 piksel:

      @media (min-width:100px) and (max-width:120px) {}
      @media (min-width:140px) and (max-width:160px) {}
      Antara 100 – 120 lalu 140 – 160
      min          → → →          max
      └─┬───┬───┬───┬───┬───┬───┬─┘
      100 110 120 130 140 150 160
      │ → → → │       │ → → → │
      └───┬───┘       └───┬───┘
      100 – 120       140 – 160
      │ → → → │
      └───┬───┘
      121 – 139
      [?]
      Kosong di jarak 121 – 139

      Apakah harus menulis ulang isi kueri dari 768 – 1024 mas?

      Perbesar saja jaraknya, supaya tidak perlu menulis ulang.

      Kalo layout adalah satu kolom kan tidak terlalu ribet mas, semisal dijadikan satu kueri 320 – (lebar layout), apakah itu lebih baik dibanding satu persatu atau bagaimana?

      Kalau yang satu ini tidak perlu memakai media query mas, pakai satuan max-width saja jika tujuannya hanya untuk mengubah lebar kontainer dari nilai fixed menjadi fluid:

      .container {max-width:320px}
      • Putra

        Okeee. Terimakasih mas taufik. Sugeng riyadi Minal aidzin wal faidzin ^_^

Komentar telah ditutup.