Membuat test kecil dari css dan html untuk keperluan desain tema responsive blog

Ada bermacam jenis ukuran layar, tampilan sebuah situs di layar antar gadget dengan ukuran layar yang berbeda bisa sangat jauh atau dekat, tergantung bagaimana "responsive" nya ia di buat.

Untuk meminimalisir tampilan yang terlalu kontras, saat mendesain sebuah website, bisa dibuat beberapa tes kecil, hanya dengan sedikit css dan html. memanfaatkan konsep desain responsive website.

Lazimnya, desain responsive di mulai dengan kode css berikut ;

  @media screen and (max-width: 1390px) {
    div {
        width: 50%;
    }
  }

Nah dikatakan saat tampilan situs di 300px - max 1300px, elemen div yang tadinya memiliki ukuran "awal" diubah jadi 50% width atau lebarnya.

1300px itu berapa lebar sulit diagak, untuk itu tes kecil ini dapat menunjukannya dan memberi ide apa saja yang perlu berubah, muncul dan hilang sesuai ukuran layar.

Yakni seperti ini

  <div class="tes1">
    <h1>1300px</h1>
  </div>
  

Dengan css ;

  .tes1 {
  width: 300px;
  height: 300px;
  display: fixed;
  top: 20;
  left : 20;
  }
   @media screen and (max-width: 1390px) {
    .tes1 {
  display: none;
  }
  }
  

Dan seterusnya ;

  <div class="tes2">
    <h1>1024px</h1>
  </div>
 

Dengan css ;

  .tes2 {
  width: 300px;
  height: 300px;
  display: fixed;
  bottom: 20;
  right : 20;
  }
   @media screen and (max-width: 1024px) {
    .tes2 {
  display: none;
  }
  }
  

Saat tengah mendesain, untuk melihat tampilan situs seperti apa di ukuran-ukuran layar yang di target, adalah saat tes bikinan tadi menghilang ketika browser di minimize.

Untuk jelas nya silah kan saksikan dalam video dibawah;

Tentang Author

St

Dikirim pada -25 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :