5 Trik Css Yang Mempunyai Kegunaan Untuk Desain Responsive

Baca Juga

5 Trik CSS yang Berguna untuk Desain Responsive - Membuat desain untuk menjadi responsive sangat gampang menyerupai yang ditunjukkan dalam Desain Responsive aku hari ini, tetapi menjaga unsur-unsur untuk melihat estetis seimbang pada semua layout breakpoint ialah seni.

Hari ini Fajri Andaviar akan menyebarkan 5 Trik CSS yang Berguna untuk Desain Responsive, dengan pola kasus untuk pengkodean desain responsive. Mereka ialah properti CSS sederhana menyerupai min-width, max-width, overflow, dan relative value - tapi sifat ini memainkan peranan penting dalam desain responsive.

1. Responsive Video

Video CSS trik responsive ini ditemukan oleh tjkdesign.com. Itu menciptakan embed video memperluas lebar penuh untuk batas.

Berikut CSS nya :

.video {  position: relative;  padding-bottom: 56.25%;  height: 0;  overflow: hidden; }  .video iframe,   .video object,   .video embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%; }

2. Min & Max Width

Properti max-width memungkinkan Sobat untuk mengatur lebar max elemen. Tujuan max-width ini untuk mencegah elemen dari memperluas batasannya.

Max-Width Container
Dalam pola di bawah ini, aku memilih wadah untuk menampilkan pada 800px bila mungkin, tetapi dilarang melebihi 90% dari lebar batas.

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

Responsive Image (Gambar)
Sobat sanggup menciptakan gambar otomatis mengubah ukuran dengan lebar maksimum batas dengan memakai max-width:100% dan height:auto.

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

Responsive gambar CSS di atas bekerja pada IE7 dan IE9, tetapi tidak bekerja pada IE8. Untuk memperbaikinya, tambahkan width:auto. Sobat sanggup menerapkan CSS bersyarat khusus untuk IE8 atau gunakan IE hack di bawah ini:

@media \0screen {   img {     width: auto; /* for ie 8 */   } }

Min-Width
Min-width berlawanan dengan max-width. Ini memilih lebar minimum dari elemen. Dalam pola bentuk di bawah ini, min-width dipakai pada bidang teks masukan untuk mencegah masukan dari pendapatan yang sangat kecil dikala skala bawah.

Ilustrasi min-width

3. Relative Value

Dalam desain responsif, mengetahui kapan harus memakai nilai relative sanggup menyederhanakan CSS dan memaksimalkan hasil tata letak yang terbaik. Berikut ialah beberapa contoh.

Relative Margin
Di bawah ini ialah pola dari daftar komentar yang dimana margin kiri relative dipakai untuk ruang keluar komentar threaded. Alih-alih memakai nilai tetap pixel, aku memakai nilai persentase untuk ruang keluar sub-lists. Seperti ditunjukkan pada sisi kiri layar, kotak konten dalam sub-daftar menjadi sangat kecil pada resolusi mobile bila margin pixel kiri digunakan.

Ilustrasi margin-left pada baris daftar komentar

Relative Font Size
Dengan nilai relative (eg em Atau %), ukuran font, line-height dan jarak margin sanggup diwariskan. Misalnya, aku sanggup mengubah ukuran font pada semua elemen keturunan dengan hanya mengubah ukuran font pada elemen induk.

Ilustrasi Relative Font Size

Relative Padding
Screenshot di bawah ini menunjukkan lebih baik memakai persentase padding relative dibandingkan dengan padding fixed pixel. Kotak di sebelah kiri menunjukkan ruang padding tidak seimbang bila pixel padding digunakan. Kotak dengan persentase padding di sebelah kanan menunjukkan bahwa tempat konten dimaksimalkan.

Ilustrasi Relative Padding

4. Trik Overflow:Hidden

Trik ini sangat berguna, Sobat sanggup menghapus float dari elemen sebelumnya dan menyimpan konten berjalan dalam wadah(container) dengan menerapkan overflow:hidden.

Ilustrasi Overflow:Hidden

5. Word-Break (Menjeda Kata)

Disini Saya juga berbicara perihal properti word-wrap sebelumnya. Anda sanggup memaksa teks unbreaking (misalnya. Panjang URL teks) untuk membungkus bukan berjalan dalam satu baris.

.break-word {   word-wrap: break-word; }

Ilustrasi Word-Break

Hanya itu saja yang sanggup aku bagikan hari ini, kurang lebihnya mohon maaf, Wassalam.