Faktor lain yang menyebabkan fokus pada desain responsif mobile-first adalah sebagian besar orang mengakses internet melalui perangkat seluler mereka, yaitu 60%. Sementara hanya 20% masyarakat yang menggunakan internet di desktop.
Artikel ini akan membahas petunjuk untuk membuat desain responsif yang mengutamakan seluler.
Bagaimana Cara Mengatur Desain Responsif Mobile-First?
Desain responsif baik mobile-first responsive atau untuk layar yang lebih besar dapat dibuat dengan mengikuti metode yang diberikan di bawah ini:
- Buat desain responsif yang mengutamakan seluler.
- Gunakan/manfaatkan kueri media untuk mengembangkan/membuat desain responsif untuk layar yang lebih besar.
Metode 1: Buat Desain Responsif yang Memprioritaskan Seluler
Pertama, mulailah dengan membuat pendekatan desain yang mengutamakan seluler. Untuk tujuan itu, ikuti petunjuk langkah demi langkah yang disediakan di bawah ini.
Langkah 1: Buat Struktur HTML
Pertama, buat struktur HTML dan tambahkan “ tali sepatu ' dalam
< jalan >
< itu < A href = '#' > Rumah < / A < / itu >
< itu < A href = '#' > Tentang kami < / A < / itu >
< itu < A href = '#' > pelayanan kami < / A < / itu >
< itu < A href = '#' > Hubungi kami < / A < / itu >
< / jalan >
< / tidak>
< / tajuk>
< h1 > Selamat datang di Petunjuk Linux < / h1 >
< P > Sebuah situs tutorial. < / P >
< / bagian>
< / utama>
< P > Hak Cipta Petunjuk Linux < / P >
< / catatan kaki>
< / tubuh >
Langkah 2: Terapkan CSS
Di bagian badan, atur “ font-keluarga ' ke ' Sans Serif ”. Atur juga padding, margin, dan warna latar belakang. Setelah itu terapkan CSS pada header, footer, dan navigasi:
tubuh {font-keluarga : Sans Serif ;
batas : 0 ;
lapisan : 0 ;
warna latar belakang : #808080 ;
}
tajuk {
warna latar belakang : ungu ;
warna : putih ;
lapisan : 8 piksel ;
}
nav ul {
tipe gaya daftar : tidak ada ;
lapisan : 0 ;
batas : 0 ;
}
kapal mereka {
batas : 4 piksel 0 ;
}
nav ul li a {
warna : putih ;
dekorasi teks : tidak ada ;
}
utama {
lapisan : 18 piksel ;
}
catatan kaki {
warna latar belakang : Merah Jambu ;
warna : putih ;
perataan teks : tengah ;
lapisan : 8 piksel ;
}
Seperti yang dapat diamati, keluaran di bawah ini telah mengonfirmasi bahwa desainnya responsif terhadap seluler:
Metode 2: Gunakan Kueri Media untuk Membuat Desain Responsif untuk Layar Lebih Besar
Desain di atas juga dapat dibuat untuk layar yang lebih besar seperti tablet dan desktop. Untuk tujuan itu, pengguna perlu memasukkan media query ke dalam CSS. Lebar untuk tablet adalah “ 786 piksel ” dan untuk desktop adalah “ 1024 piksel ”.
Untuk menerapkan kueri media, pertama-tama, sertakan “ @media ” tag di file CSS. Setelah itu, tentukan properti “min-width” sebagai “ 768 piksel ”. Artinya setiap kali ukuran layar minimum “768px” atau lebih tinggi terpenuhi, CSS berikut akan diterapkan:
@media ( lebar minimum : 768 piksel ) {tubuh {
ukuran huruf : 14 piksel ;
}
tajuk {
lapisan : 18 piksel ;
}
nav ul {
menampilkan : melenturkan ;
}
kapal mereka {
batas : 0 8 piksel ;
}
utama {
menampilkan : melenturkan ;
membenarkan konten : ruang-antara ;
menyelaraskan-item : tengah ;
}
catatan kaki {
lapisan : 18 piksel ;
}
}
Output di bawah ini menunjukkan bahwa desainnya juga responsif pada layar yang lebih besar:
Kesimpulan
Untuk menyiapkan desain responsif yang mengutamakan seluler, pertama-tama, buat struktur HTML dan tambahkan area pandang. Setelah itu tautkan file CSS pada tag head. Kemudian, terapkan CSS berdasarkan desain responsif yang mengutamakan seluler. Selanjutnya, pengguna dapat menambahkan media query CSS untuk disesuaikan pada perangkat seluler. Tulisan ini telah menunjukkan prosedur mendetail untuk menyiapkan desain responsif yang mengutamakan seluler.