1. Responsive Images

Responsive Images adalah konsep di mana gambar pada suatu website dapat menyesuaikan diri dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lainnya yang berbeda.

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

2. Use % In Padding And Margins

Dalam CSS, % dapat digunakan dalam pengaturan padding dan margin.

• Padding adalah jarak antara konten dan batas elemen. Nilai padding dalam % akan dihitung berdasarkan lebar elemen yang mengandungnya.
• Margin adalah jarak antara elemen dengan elemen lainnya. Nilai margin dalam % akan dihitung berdasarkan lebar elemen yang mengandungnya.

div {
  margin-left: 5%;
  margin: 3% 5%;
}

3.  Responsive Form Elements

Responsive Form Elements adalah elemen formulir yang dapat menyesuaikan ukuran dan tata letaknya berdasarkan ukuran layar perangkat yang digunakan. Ini berarti bahwa elemen seperti kotak teks, area teks, dan tombol akan menyesuaikan ukuran dan posisinya untuk memberikan tampilan yang optimal pada berbagai ukuran layar, dari desktop hingga tablet dan ponsel. 

input, textarea, select, checkbox {
  max-width: 90%;
}

4. Fixed width Responsive Container

Fixed width Responsive Container adalah elemen desain web yang memiliki lebar tetap dalam piksel, tetapi dapat menyesuaikan diri dengan lebar layar perangkat yang digunakan. Ini berarti bahwa lebar kontainer akan berubah pada titik putus yang berbeda atau ukuran layar.

.container {
  width: 800px;
  max-width: 90%;
}

5. Responsive Videos

Responsive Videos adalah video yang dapat menyesuaikan ukuran dan tata letaknya berdasarkan ukuran layar perangkat yang digunakan. Misalnya, jika lebar properti diatur menjadi 100%, pemutar video akan responsif dan dapat diperbesar atau diperkecil. Ini berarti bahwa video akan berubah ukuran untuk memberikan tampilan yang optimal pada berbagai ukuran layar, dari desktop hingga tablet dan ponsel.

<iframe width="100%" height="315">

6. Convert Tables to Responsive

Mengubah tabel menjadi responsif berarti mengubah tabel HTML tradisional menjadi tabel yang dapat menyesuaikan diri dengan ukuran layar perangkat yang digunakan. Ini berarti bahwa lebar dan tinggi tabel akan berubah untuk memberikan tampilan yang optimal pada berbagai ukuran layar, dari desktop hingga tablet dan ponsel. Tujuannya adalah untuk memastikan bahwa tabel dapat ditampilkan dengan baik di berbagai ukuran layar.

@media (max-width: 400px) {
  td {
    float: left;
    display: block;
  }
}