GO Blog

Satuan berperan penting untuk mengukur dan membangun hal-hal seperti rumah, jembatan atau menara, dan membangun sebuah website pun tidak terkecuali. Ada beberapa metode pengukuran yang digunakan di Web, khususnya dalam CSS, yaitu Pixel, EM dan Persentase.

Dalam posting ini, kita akan mempelajari melalui unit-unit ini untuk mendapatkan wawasan lebih lanjut ke dalam unit pengukuran.

PX

Pixel adalah unit pengukuran tetap dan unit terkecil pengukuran layar tapi jangan bingung ini tidak terkait dengan Pixel yang mendefinisikan resolusi layar. Pixel dalam CSS tidak ada hubungannya dengan resolusi layar. Ketika kita mencoba melihat halaman web tetap pada lebar 1024px mengatakan pada tablet dengan 1024px oleh resolusi layar 480px, halaman web tidak muat di layar.

Saya sudah mengalami masalah ini dan menemukan bahwa Pixel di CSS sebenarnya bukan unit linear - itu sebenarnya pengukuran radial. Pada dasarnya, Pixel di CSS mengukur panjang area tampilan bukannya resolusi layar, sehingga resolusi layar 1024px tidak berarti bahwa layar juga 1024px dari panjang.

EM

EM adalah pengukuran relatif. Dalam CSS, EM mengacu pada perkalian dari ukuran font default dari perangkat atau dokumen itu sendiri, itulah sebabnya saya secara pribadi sebagai kata EM menekankan, tapi tentu saja jangan mengambil kata saya untuk itu.

Berikut adalah contoh; katakanlah dalam dokumen, ukuran font diberi ukuran 16px. 1em sama dengan 16px, 2em sama dengan 32px dan seterusnya. Meskipun EM secara tradisional digunakan untuk huruf ukuran dan sebenarnya itu adalah unit standar yang digunakan dalam gaya peramban untuk mengukur ukuran font, kita juga bisa menggunakan EM untuk menentukan panjang sebuah elemen.

Satu-satunya kendala ketika bekerja dengan EM unit itu tidak cukup intuitif, tetapi ada dua cara praktis yang dapat kita pakai untuk menangani hal ini. Pertama, kita dapat menggunakan kalkulator ini, PX untuk EM, melainkan kalkulator berguna yang sering saya gunakan.

Persentase

Hal ini lebih mudah dengan persentase, yang mengukur relatif dengan panjang induk. Ketika lebar induk 800px maka 50% akan menjadi 400px. Dalam beberapa tahun terakhir, sebagai Desain Responsif mulai menjadi standar desain web, satuan persentase disesuaikan untuk digumakan.

Baiklah, mari kita lihat contoh berikut; kode di bawah ini mendefinisikan kontainer dan pemilih kelas utama dengan 60% untuk lebar, tapi kelas ini mengacu pada parrent yang berbeda sehingga mereka menghasilkan panjang yang berbeda. Kontainer akan mengambil 60% dari browser lebar viewport, sementara Yang utama akan mengambil Lebar kontainer sebagai direct parrent.

    .container {  
        width: 60%;  
        margin: 100px auto;  
        background-color: #eaeaea;  
        padding: 1%;  
        height: 250px;  
        font-family: Arial;  
        text-align: center;  
    }  
    .main, .aside {  
        line-height: 253px;  
    }  
    .main {  
        width: 60%;  
        height: 100%;  
        float: left;  
        background-color: #ccc;  
    }  
    .aside {  
        width: 40%;  
        height: 100%;  
        background-color: #aaa;  
        float: left;  
    }  

Dengan demikian, akan memberi kita hasil seperti berikut:

Sebagai persentase juga merupakan unit relatif, sehingga memiliki kendala yang sama seperti unit EM juga. Hal ini tidak jelas berapa banyak 15px persentase dari 500px? Hal ini biasanya terjadi ketika kita menerjemahkan satuan px dari tahap desain untuk dokumen web dalam banyak kasus. Ada dua cara yang bisa kita ambil untuk hal ini, baik kita melakukannya secara tradisional dengan kalkulator atau jika Anda merasa nyaman dengan menggunakan CSS Pre-prosesor, Anda dapat memanfaatkan persentase () fungsi dari Sass.

Semoga berguna dan bermanfaat...