Ukuran konten untuk CSS

• Jenis Unit

Absolute atau Exact Units, unit ini merupakan nilai pasti dari setiap panjang dan lebar. Misalnya cm, mm, pt, dan px. Tetapi, unit ini tidak direkomendasikan karena banyaknya ukuran layar yang berbeda-beda.

Relative Units, unit ini bekerja lebih baik pada ukuran layar yang berbeda karena relatifitasnya. Ambil contoh seperti 10% dari 1000px adalah 100px.

• Px

Unit px adalah unit yang absolut terhadap setiap titik pixel yang terdapat dalam resolusi layar kamu. biasanya, jika semua isi konten website menggunakan unit px, maka akan terjadi masalah ketika user men-zoom in website tersebut. Unit px direkomendasikan untuk mengatur lebar border.

•  em

Unit em adalah unit yang relatif dengan ukuran font yang digunakan oleh elemen tersebut. sebagai contoh, bila kita mengatur ukuran font dalam suatu elemen menjadi 20px, maka 0.5em akan mengubahnya menjadi 10px.

• rem

Unit rem hampir sama dengan unit em. bedanya adalah, unit rem relatif dengan ukuran font default yang ada pada setiap browser. contohnya, ukuran font default dari setiap browser adalah 16px, maka 2rem akan merubahnya ,menjadi 32px.

• %

Unit % (persen) adalah unit yang relatif dengan total panjang atau lebar suatu elemen dimana dia berada. contohnya, kamu mempunyai panjang kotak sebesar 100cm, untuk memeasukkan kotak kedua dengan ukuran setengahnya, kamu bisa memakai unit 50% untuk mengubahnya.

• vh & vw

Unit vh dan vw akan mengatur porsi yang diambil dari ukuran layar kamu. misalnya, kamu ingin mengatur ukuran konten kamu untuk memakan semua lebar layar perangkat, kamu bisa memakai 100vw, begitupun sebaliknya untuk mengatur.

sumber: codingstudio.id