Ads 720 x 90

Fiksioner Free Blogger Theme Download

Kenali Satuan Ukuran Dalam CSS sebelum Ngoding

B-KREATIF - Halo teman-teman kali ini saya akan membagikan sedikit ulasan satuan dalam css. Sebelum kita akan membuat sebuah tampilan dari sebuah situs, pastinya kita harus paham detail dari css.


Pada dasarnya ketika kita baru memulai belajar membuat sebah front end sebuah web, kita menggunakan satuan ukuran PX dan % dalam belajar, akan tetapi ternyata ukuran dalam css banyak loh. Oleh karna itu kita akan belajar. yuk kita ulas tentang ukuran dalam css.


SATUAN UKURAN DALAM CSS


1. Satuan Persen ( % )

Persentase adalah satuan yg tidak dihitung berdasarkan sebuah ukuran elemen itu sendiri akan tetapi perbandingan dengan induk elemennya.

Biasanya persentasi digunakan untuk menentukan  ukuran kolom (Grid System), mari kita intip Grid System dari beberapa Framework CSS:

BOOTSTRAP



.col-xs-6 {
    width: 50%;
  }

Semantic UI



.ui[class*="six column"].grid > .row > .column,
  .ui[class*="six column"].grid > .column:not(.row) {
    width: 16.66666667%;
  }

Namun satuan ini juga baik digunakan dalam penentuan ukuran header atau h1, h2, h3, dst. dalam beberapa kasus, seperti ingin mempermudah pengerjaan situs yang responsif.

2. Satuan Pixel ( PX )

Jika anda seorang junior programmer, Satuan Ini adalah satuan yang sering anda lihat dan digunakan oleh mayoritas programmer, Kenapa banyak programmer menggunakan Satuan Ini ?  dikarnakan satuan ini sangat cocok digunakan oleh elemen yang berukuran akurat, tidak terpengaruh oleh elemen disekitarnya atau induknya.

3. Satuan REM dan EM

Dalam Satuan rem dan em bisa dikatakan 16 kali dari satuan px, jadi 1rem/em = 16px, akan tetapi pada satuan em masih bisa bergantung terhadap font-size, Contohnya ketika induk elemen memiliki property font-size 14px dan anaknya memiliki property font-size: 1.6em, maka hasil yang akan ditampilkan adalah 14px * 1.6em = 22.4px.

Salah satu contoh kasus yang satuan em terasa sangat bermanfaat adalah pada padding untuk elemen yang font-sizenya mudah berubah-ubah, contoh seperti :

.button{
    font-size: 1em;
    padding: 5em 10em;
  }

Dikarenakan induk yang mempunyai property font-size dari element .button tidak ada, maka property font-size bernilai 1em = 16px, namun pada padding 5em dan 10em terpengaruh oleh nilai dari font-size, jadi 5em 16px = 80px, dan 10em 16px = 160px.

Tapi tidak dengan satuan rem, rem satuan yang tidak terpengaruh oleh font-size, em bisa dikatakan pewaris dari rem yang berarti "r" adalah "root".

4. Satuan VW dan VH

Satuan ini disebut viewport, satuan ini adalah cara terbaik untuk membuat elemen responsif, kenapa bisa?

Hampir sama dengan % atau persentase, namun persen tidak bisa menentukan height, beda dengan vw dan vh, vw artinya viewport width dan vh artinya viewport height.

Satuan ini bergantung pada induk elemennya, jika induk elemen mempunyai ukuran 300px x 400px maka 1vh darinya adalah 400 * 1/100 = 4px dan jika 100vh artinya adalah height yang kita tentukan 100% dari height induknya.

Jika induk dari element adalah 100% atau tak terhingga, maka 100vh bergantung pada ukuran layar.


body{
    height: 100%;
  }
  body .screen.cover{
    height: 100vh;
  }

Teknik ini sangat bermanfaat jika kita ingin membuat fullscreen elemen, dan saya sangat sering menggunakannya terutama membuat cover untuk front page.

5. Satuan VMIN dan  VMAX

Satuan vmin dan vmax
Satuan ini mirip dengan vw dan vh, bedanya jika kita menentukan 100vmin satuan ini akan bergantung pada induk dengan ukuran terendah, bingung?

Misalnya induk elemen memiliki ukuran 1000px x 1200px, jika anak elemen memakai :


.anak{

    height: 100vmin;

    width: 100vmin;

  }

Maka hasil yang akan ditampilkan seperti :

.anak{

    height: 1000px;

    width: 1000px;

  }

Begitu juga sebaliknya.


6. Satuan EX dan CH

Satuan ini mirip dengan rem dan em, bedanya 1ex/ch = 8px, namun satuan ini tidak hanya bergantung pada font-size tapi juga bergantung pada font-family agar ukurannya lebih spesifik.

Sumber : Codepolitan

Related Posts

Post a Comment

Subscribe Our Newsletter