CSS - Aplikasi Sederhana CSS Media Queries Untuk Desain Web Responsif

Pada materi ini kita melanjutkan pembahasan tentang media queri, kita akan coba lihat sekilas struktur html sederhana. Dan itu sangat sederhana untuk melihat cara kerja media querie bagi laman web anda. Hanya H1 saja dengan dua paragraf. Yang pertama adalah id dengan p1, dan yang kedua adalah id dengan p2.

/photo/apple-applications-apps-607812/

Oke mari kita lihat struktur HTML-nya:

<html>
   <head>
   <title>Media Queries</title>
      <style>
 /*********************Base Styles*******/
 h1 {
     margin-bottom: 15px;
      }
 p  {
     border: 1px solid: black;
     margin-bottom: 15px;
 }
 #p1 {
     background-color: lightblue;
     width : 300px;
     height : 300px;
 }
 #p2 {
     background-color: yellow;
     width : 50px;
     height: 50px;
 }


 /*****Perangkat Dengan Layar Besar*******/


 /****Perangkat Dengan Layar Kecil*******/

      </style>

   </head>
   <body>


    <p id="p1">Contoh Paragaf p1</p>
        <p id="p2">Contoh Paragraf p2</p>


   </body>
</html>

media1

Jadi di sini kami menargetkan paragraf dengan hanya memberikan batas 1px black solide dan margin bawah 15 piksel. Lantas bedanya terdapat pada ID selector. Paragraf pertama kita beri ruang cukup besar 300px , 300px dengan warna latar lightblue. Sedangkan paragaraf kedua kita beri ruang 50px, 50px dengan warna latar gray. Jadi di sini adalah dua paragraph, Yang satu cukup besar, yang lain kecil. Setelah itu kita coba di browser. Dan ternyata setelah uji coba, meskipun lebar peramban dibuta lebih kecil, lebih kecil dan lebih kecil, tidak ada yang terjadi sama sekali.

Pertama kita akan buat media queries untuk perangkat dengan layar besar. Baik, biasanya perangkat layar lebar mempunyai resolusi ukuran lebih dari 1200px. Jadi kita mulai membuat aturan media queries untuk perangkat layar besar ini.


@media (min-width: 1200px){
#p1 {
width: 80%;
}
#p2 {
width: 100px;
height: 100px;
}
}

Jadi pada paragraph pertama kita akan mengubah lebar itu untuk seperti contoh diatas, lebar jendela hingga 80%, jadi maksudnya paragraph 1 akan terbuka dengan lebar 1200 piksel atau lebar akan mengambil 80% dari layar user. Sedangkan paragraph 2 kita buat lebarnya 100px. Lebih besar dari aslinya 2 kali lipat, karena sebelumnya hanya 50px. Begitupun tingginya 100px.


<html>
   <head>
   <title>Media Queries</title>
      <style>
 /*********************Base Styles*******/
 h1 {
     margin-bottom: 15px;
      }
 p  {
     border: 1px solid: black;
     margin-bottom: 15px;
 }
 #p1 {
     background-color: lightblue;
     width : 300px;
     height : 300px;
 }
 #p2 {
     background-color: yellow;
     width : 50px;
     height: 50px;
 }


 /*****Perangkat Dengan Layar Besar*******/
 @media (min-width: 1200px){
#p1 {
width: 80%;
}
#p2 {
width: 100px;
height: 100px;
}
}


 /****Perangkat Dengan Layar Kecil*******/

      </style>

   </head>
   <body>


    <p id="p1">Contoh Paragaf p1</p>
        <p id="p2">Contoh Paragraf p2</p>


   </body>
</html>

media2

Nah hasil dari media queries diatas, ketika dibuka pada peramban dan anda mengatur lebar perambaannya maka paragraph 1 akan terbuka dengan lebar min 1200px atau mengambil 80% layar user. Jadi bagaimanapun user mengubah ukuran layar mereka maka paragraph 1 akan berubah dan mengambil 80% layar user. Sedangkan paragraph 2 hanya bertambah lebar dan tinggi menjadi 100px berdasarkan aturan media queries yang dibuat.

Sekarang kita coba buat media queri lagi pada perangkat layar kecil. Saya coba ambil perangkat ini mempunyai lebar minimum 992px dan maximum-nya 1199px. Ingat bahwa kita sudah membuat aturan bahwa perangkat layar besar tadi mempunyai ukuran diatas 1200px. Jadi agar tidak terjadi konflik dalam membuat aturan media queries anda maka perangkat layar kecil maximum lebarnya adalah 1199px atau dibawah 1200px.

@media (min-width: 992px) and (max-width: 1199px)
{
#p1 {
width : 50%;
}
#p2 {
width : 75px;
height: 75px;
}
}

Disini pada paragraph 1 kita mengambil lebar 50% atau sedikit lebih kecil daripada untuk ukuran layar yang lebih besar. Dan paragraph 2 mmepunyai lebar 75px, dan tingginya juga.

<html>
   <head>
   <title>Media Queries</title>
      <style>
 /*********************Base Styles*******/
 h1 {
     margin-bottom: 15px;
      }
 p  {
     border: 1px solid: black;
     margin-bottom: 15px;
 }
 #p1 {
     background-color: lightblue;
     width : 300px;
     height : 300px;
 }
 #p2 {
     background-color: yellow;
     width : 50px;
     height: 50px;
 }


 /*****Perangkat Dengan Layar Besar*******/
 @media (min-width: 1200px){
#p1 {
width: 80%;
}
#p2 {
width: 100px;
height: 100px;
}
}


 /****Perangkat Dengan Layar Kecil*******/
 @media (min-width: 992px) and (max-width: 1199px)
{
#p1 {
width : 50%;
}
#p2 {
width : 75px;
height: 75px;
}
}


      </style>

   </head>
   <body>


    <p id="p1">Contoh Paragaf p1</p>
        <p id="p2">Contoh Paragraf p2</p>


   </body>
</html>

Maka penjelasannya ketika layar user adalah layar desktop, atau layar normal maka berlaku aturan paragraph 1 akan mempunyai lebar 300px, 300px dan paragraph 2 akan mempunyai lebar 50px, 50px. Namun ketika user anda menggunakan layar yang rangenya 992px dan 1199px maka ukuran lebar paragraph 1 akan mengikuti 50% dari ukuran layar user, sedangkan paragraph 2 akan meningkatkan lebarnya menjadi 75px.

Dan jika user merentangkan peramban menuju 1200px maka media queries yang berlaku adalah Perangkat Dengan Layar Besar.

Nah anda dengan CSS media queries ini seperti pembahasan materi kita yang lalu bisa membuat aturan untuk perangkat apa saja, termasuk modus potret dan lansekap. Ukuran-ukuran layar perangkat yang digunakan pada umumnya seperti ini:

  • Large Device (Desktop) dengan ukuran > 1200px, ukuran Layar Monitor besar pada umumnya
  • Medium Deivce (Desktop) >= 992px, ukuran Resolusi Tablet Landscep Ipad2 dan Ipad Mini 1024 x 768px
  • Small Device (tablet) >= 768px, ukuran Resolusi Tablet Potrait Ipad2 dan Ipad Mini 768 x 1024px
  • Extra Small Device (mobile) < 768px, ukuran Resolusi Mobbile Iphone mayoritas > 640px

Jadi sederhananya, kita bisa buat basic syntax untuk media queries dan tetap anda harus ingat juga jika Anda bisa menggabungkan fitur media dengan beberapa operator logis. Kita membahas disini tentang bagaimana anda bisa menyusun struktur media queries dengan lebar yang berbeda dari perangkat yang berbeda, bahwa batas lebar perangkat ini seharusnya tidak lebih dari aturan media queries yang sudah anda buat. Oke selamat melakukan uji coba.