Setelah kita menggenal Pentingnya Website yang Mobile Friendly Baca disini : pentingnya website mobile friendly
Tentu kita akan memulai dengan mendesain website kita sebelum nya kita pernah membahas tentang Menggunakan Meta Viewport Baca disini : website mobile friendly dengan meta

Setelahnya kita akan mendesain dengan menggunakan Media Query, Adaptasi yang dilakukan pada tampilan Smarthphone tertentu diatur melalui fitur media Query di CSS3, Meida Query digunakan untuk menetapkan sekelompok aturan CSS yang hanya berlaku khusus bagi media atau tampilan tertentu, Parameter yang banyak dipakai dalam media Query adalah sebagai berikut :

@media not|only [jenisnya] and (Fitur:batasan) {.isi CSS;}

Berikut beberapa penjelasan nya :
@media : Penetapan sekelompok aturan CSS khusus untuk jenis piranti atau media tertentu.
not atau only [jenisnya] and : Parameter untuk menyebutkan secara eksplisit satu atau beberapa jenis media yang diatur.

(Fitur batasan) : Adalah Parameter untuk menyebutkan fitur media yang diatur dan nilai batasan nya. Fiturnya bisa min-widht , max-widht , orientation , Max-device-widht dan masih banyak lagi namun jarang dipakai.

{.isi CSS;} : Adalah sekumpulan aturan CSS yang hanya berlaku untuk jenis atau media yang disebutkan dalam bentuk @media

Berikut beberapa contoh media query yang sering diapakai cobalah masukan pada file.tema.css agan :

@media print {
     body {
        color: #000;
        background-color: #fff;
     }
     a, a:visited {
        color: #666;
     }
}

Media Query diatas untuk mengatur halaman website agar dapat saat dicetak menggunakan warna teks hitam dengan warna latar putih, Adapun link akan dicetak agak abu abu. Agan juga bisa mencoba mencetak atau melakukan print dan melihat hasilnya. Media Query print dipakai untuk mereset warna, Tujuan nya menghindarkan percetakan dengan warna dan teks dan link yang berwarna warni sehingga sulit dibaca.

@media (min-widht: 768px) {
    .batas {
      padding: 0 20px;
    }
}

Media query diatas untuk mengatur elemen ber class batas agar jarajnya 20 piksel dari tepi jendela browser ketika dibuka di piranti dengan lebar layar minimal 768 piksel.
Pada layar yang kurang dari 768 piksel jarakn tetap 10 pixsel sesuai aturan yang sudah ditetapkan.

@media (max-widht: 767px) {
   main, aside )
     float: none;
     widht: 100%;
     padding: 10px 0;
   }
}

Media query diatas untuk membatalkan efek melayang sekaligus memperluas elemen main dan aside saat diakses dengan layar 767 piksel
Jika diakses dari komputer dekop atau mode smarthphone layar lebar maka efek melayang dan lebar kedua elemen tersebut akan berlaku sesuai aturan yang sudah ada.

@media (max-device-widht: 480px) and (orientation: potrait) {
    header {
      height: 100px;
    }
}

Media Query diatas untuk menyesuaikan tinggi header agar menjadi 100 piksel saat diakses mode ponsel maksimal 480 piksel dan dalam orientasi potrait.

Parameter yang paling lazim dipkai dalam desain website responsive adalah max-widht dan min-widht berikut lebar layar yang akan menjadi patokan dalam mengatur :
- Layar ponsel < 768px
- Layar tablet >_ 768px
- Layar Deskop >_ 992px
- Layar lebar >_ 1200 px.