Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Mengenal Media Queries Dalam CSS3

Fungsi dari Media Queries dalam CSS3 adalah mengubah stylesheet berdasarkan lebar & tinggi yang kita tentukan. Ini biasa dilakukan oleh web designer untuk mendesain website responsive di berbagai device yang ditentukan seperti iPhone, Tablet & sebagainya. Jadi kita bisa membuat style terpisah untuk berbagai resolusi yang kita tentukan.

Demo Media Queries

Anda bisa akses halaman demo tersebut yaitu blog ini sendiri melalui berbagai device seperti HP, iPhone, iPad, Tablet & sebagainya. Anda bisa melihat perbedaan tata letak & navigasi yang berbeda. Anda juga dapat membuktikannya dengan resize web browser anda, zoom in/out web browser, & menggunakan responsive tester yang bertebaran di internet.

Bagaimana cara menggunakannya ? Pada dasarnya kita tentukan style di ukuran berapa yang akan kita buat, lalu isikan dengan style dengan menyesuaikan id & class yang sama dengan style utama. Masih belum ngerti juga ? Perhatikan kode CSS dibawah ini.


<style type="text/css">
/* Ini untuk defaultnya */
.konten {
 background: #eee;
}

/* Ini untuk maksimal 600px */
@media screen and (max-width: 600px) {
  .konten {
       background: #000;
   }
}
/* Ini untuk maksimal 900px */
@media screen and (max-width: 900px) {
  .konten {
       background: #fff;
   }
}
/* Ini untuk minimal 160px dan maksimal 320px */
@media screen and (min-width: 160px) and (max-width: 320) {
   .konten {
       background: #fcf;
   }
}
/* Ini untuk maksimal lebar perangkat 4800px */
@media screen and (max-device-width: 480px) {
  .konten {
       background: #ddd;
   }
}
</style>

Kode CSS diatas akan menghasilkan style background berbeda disetiap ukuran lebar yang ditentukan. Anda bisa mengkreasikan seperti membuat mobile site hanya dengan menggunakan CSS3 tanpa merubah isi konten utama & menulis ulang kode html untuk mobile site.

31 Comments

  1. RirinReply

    asyik juga ya kalau website bisa responsive. Jadi pas di buka dengan apa saja, pasti bentuk nya sama. Jadi pengen juga nich buat website selhosted :D
    tapi masih nabung buat sewa web hosting :D

    • Nurul ImamReply

      Pake blogspot juga bisa mbak, tinggal tambahin CSS3 Media Query aja
      Oia, udah punya banyak duit dari penghasilan iklan kok masih belum bisa bayar hosting :D

      • RirinReply

        saya pengen nya domain dot me mas hehehe :D ternyata lumayan mahal juga ya harganya hehehe :D
        sebenarnya udah ada sih uang nya. Sekarang masih belajar dulu cara membuat website. Nanti kalau udah bisa kan enak kalau pas beli web hosting :D

        • Nurul ImamReply

          Ciyeee sekarang udah punya domain .com sama hostingnya :D
          Nahhh baru tuh serasa bebas mau monetize blognya ;)

  2. Muhamamd LuthfiReply

    Wah keren-keren semua artikel disini. Belajar dari dasar-dasar CSS + HTML pokonya mantap banget !!

    • Nurul ImamReply

      Terimakasih, silahkan dipelajari mas :)

  3. Intan SudibjoReply

    seperti main tag kondisional di blogger :D

    • Nurul ImamReply

      Lhoooo… Bukan ahhh :p

  4. Dwi alfinaReply

    ijin nyimak aja kang

    • Nurul ImamReply

      Silahkan :)

  5. wongcrewchildReply

    wah iya blog ini juga, posisi nggak brubah ya, meski di zoom

    • Nurul ImamReply

      Iya, lebih tepatnya tidak ada scroll kanan ketika di zoom / diakses di hp, tablet, dsb

  6. MuslimedicalReply

    wah tulisan apa ya itu tadi ;-D

    • Nurul ImamReply

      Yang mana mas ?

  7. AgriReply

    wah yg ini ya mas? uda saya terapkan,, thnks mas :D

    • Nurul ImamReply

      Iya sama-sama :)

  8. santyReply

    dah sy trial.. hasilny keren .. makasih gan :)

    • Nurul ImamReply

      Sippp… Lebih keren kreasi sendiri :)

  9. info teknologi teranReply

    alhamdullilah gan ilmu nya bermanfaat, dan udah di terapkan diblog ane

    • Nurul ImamReply

      Sippp, jadi blognya udah responsive kan ?

  10. RirinReply

    wah harus belajar tentang php nich soalnya blog saya pakai wordpress sekarang :D

    • Nurul ImamReply

      Belajar php sama saya gratis tis tis…
      Dateng aja ke rumah :D

  11. JuraganTekno.comReply

    wahh disini tempatnya belajar CSS nihh

    • Nurul ImamReply

      Iya mas, semoga membantu :)

  12. AdeReply

    ii

  13. KhaedarReply

    mas mau tanya kalau kita dah terlanjur bikin website yang versi dekstop biasa(kan kalau di buka di gadget masih acak-acakan tuh) supaya bisa jadi website responsive tuh gmna?

    • Nurul ImamReply

      Tinggal disesuaikan ukuran gadgetnya berapa lalu terapin pake media query css3

  14. audio hajiReply

    terima kasih, sip terus di ikutin agar terus dipelajari

    • Nurul ImamReply

      Silahkan pak :)

  15. ngeeshareReply

    susah bro mahaminya

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>