Yang harus kamu tahu membuat tampilan website responsive dengan media query

linkdesain.com, Saat ini hampir semua website sudah menerapkan layout yang mobile friendly dalam artian layaot web akan otomatis menyesuaian lebar atau resolusi layar device atau perangkat yang kita gunakan, jika jaman dulu sebelum maraknya perangkat ponsel pintar kebanyakan website menggunakan layout atau halaman web terpisah dimana saat website mendeteksi bahwa web tsb dibuka melalui layar dengan resolusi terntentu misal resolusi dibawah 760px atau tampilan mobile maka website tersebut akan menggunakan halaman dalam mobile version yang biasanya berbeda halamannya dengan desktop version, sekarang menampilkan web dengan cara tersebut sudah jarang kita temui walaupun masih ada juga sih sebenarnya seperti situs-situs berita atau forum yang banyak menggunakan kolom dan layout yang ribet , tapi saat ini kebanyakan website sudah menggunakan 1 halaman web saja untuk menampilkan layout web versi mobile, tablet dan desktop yang biasanya kita sebut dengan responsif.

Ada banyak cara yang dapat kita gunakan untuk membuat tampilan website responsive yang pertama kita bisa menggunakan CSS Framework seperti Bootstrap dari twitter, foundation, materialize dari google, purecss dari yahoo dan framework css lainnya. Dengan menggunakan framework css memang cukup mudah karena kita tinggal memanggil class untuk besar gridnya tapi terkadang kalau mengandalkan framework saja layout website kita juga belum belum tentu rapi sesuai dengan yang kita harapkan di tampilan mobile, tablet, dan desktop dan untuk merapikannya tersebut kita perlu styling css secara manual dengan media query.

Yang harus kamu tahu tentang Media Query
Untuk membuat tampilan website yang responsive atau layout website yang menyesuaikan otomatis di tampilan mobile, tablet, desktop secara manual tanpa menggunakan CSS Framework kita harus menggunakan media query.
media query memiliki format atau baris kode yang standar seperti berikut

@media only screen and ( batas resolusi layar bisa max, min ) { kondisi style }
contoh : @media only screen and (min-width: 768px) { width:200px; height:100px }

atau kita bisa menggunakan batasan antara resolusi sekian sampai sekian seperti berikut

@media screen and (min-width: 1200px) and (max-width: 1365px) { kondisi style }

dan harus kita masukan dalam file css, perlu diperhatikan kamu harus membuat penulisan media query harus sesuai standar untuk menghindari crossbrowser issue dan bekerja disemua browser seperti safari, chrome, mozilla , iphone, macbook, android dll

karena saat ini ada sangat banyak device dengan standar resolusi berbeda misal saja pada iphone memilike standar resolusi seperti berikut

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

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

}

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

}

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

}

/* ----------- iPhone 6+ ----------- */

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

}

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

}

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

}

belum lagi standar resolusi smartphone-smarphone lainya yang saat sangat banyak model nya maka kita dapat mengkondisikan batasan resolusi setiap device seperti pada bootsrap saja seperti berikut


 /*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

misal kita memiki halaman web dimana heading dengan tag html seperti berikut <h1> loerm ipsum </h1> di tampilan desktop ukuran fontnya adalah 18px dan saat dibuka pada tablet ukuran font menjadi 16px dan di buka menggunakan smartphone / mobile menjadi 12px, maka kondisi style css dengan media query akan seperti ini


   h1 { font-size: 18px; }

   /* Medium Devices, Desktops */
   @media only screen and (max-width : 992px) {
   h1 { font-size: 18px; }
   }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    h1 { font-size: 16px; }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    h1 { font-size: 12px; }
     }