Responsive Web Design Principles

Responsive Web Design Principles

*Media Query adalah teknik baru yang diperkenalkan dalam CSS3 yang mengubah penyajian konten berdasarkan ukuran viewport yang berbeda. Viewport adalah area yang terlihat oleh pengguna di halaman web, dan berbeda-beda tergantung pada perangkat yang digunakan untuk mengakses situs.

Kueri Media terdiri dari jenis media, dan jika jenis media tersebut cocok dengan jenis perangkat yang digunakan untuk menampilkan dokumen, gaya akan diterapkan. Anda dapat memiliki sebanyak mungkin pemilih dan gaya di dalam kueri media sesuai keinginan.

Ingat, CSS di dalam kueri media hanya diterapkan jika jenis media cocok dengan perangkat yang digunakan. Contoh:

@media (max-width: 100px) {
  /* CSS Rules */
}

@media (min-height: 350px) {
  /* CSS Rules */
}

@media (max-height: 800px) {

  p {

    font-size: 10px;

  }

}

*Fungsi max-widthof 100%akan memastikan gambar tidak akan lebih lebar dari wadahnya, dan fungsi heightof autoakan membuat gambar mempertahankan rasio aspek aslinya.

img {
  max-width: 100%;
  height: auto;
}

.responsive-img {

max-width: 100%;

  height: auto;

}

*Cara paling sederhana untuk membuat gambar Anda muncul dengan benar di Layar Resolusi Tinggi, seperti "layar retina" MacBook Pro adalah dengan menetapkan nilai widthdan heighthanya setengah dari file aslinya. Berikut adalah contoh gambar yang hanya menggunakan setengah dari tinggi dan lebar asli:

(kalo aslinya width & height nya 200=100px dst)

<style>

   img {

    height: 100px;

    width: 100px;

  }

</style>

*Alih-alih menggunakan ematau pxuntuk mengubah ukuran teks, Anda dapat menggunakan unit viewport untuk tipografi responsif. Unit viewport, seperti persentase, adalah unit relatif, tetapi didasarkan pada item yang berbeda. Unit viewport relatif terhadap dimensi viewport (lebar atau tinggi) perangkat, dan persentase relatif terhadap ukuran elemen wadah induk.

Empat unit viewport yang berbeda adalah:

• vw(lebar viewport): 10vwakan menjadi 10% dari lebar viewport.
• vh(ketinggian viewport): 3vhakan menjadi 3% dari tinggi viewport.
• vmin(minimum viewport): 70vminakan menjadi 70% dari dimensi viewport yang lebih kecil (tinggi atau lebar).
• vmax(viewport maksimum): 100vmaxakan menjadi 100% dari dimensi viewport yang lebih besar (tinggi atau lebar).  Contoh:
• 
  

(Tetapkan nilai widthtag h2menjadi 80% dari lebar area pandang dan nilai widthparagraf menjadi 75% dari dimensi area pandang yang lebih kecil.).

<style>

h2{

  width:80vw;

}

p{

  width:75vmin;

}

</style>

Subscribe to receive free email updates: