Faktor lain yang membawa ke arah memfokuskan pada reka bentuk responsif yang diutamakan mudah alih ialah kebanyakan orang mengakses internet melalui peranti mudah alih mereka, iaitu 60%. Manakala hanya 20% orang menggunakan internet pada desktop.
Artikel ini akan merangkumi arahan untuk membuat reka bentuk responsif yang mengutamakan mudah alih.
Bagaimana untuk Menyediakan Reka Bentuk Responsif Mudah Alih Pertama?
Reka bentuk responsif sama ada responsif diutamakan mudah alih atau untuk skrin yang lebih besar boleh dibuat dengan mengikut kaedah yang diberikan di bawah:
- Buat reka bentuk responsif yang mengutamakan mudah alih.
- Gunakan/gunakan pertanyaan media untuk membangunkan/membuat reka bentuk responsif untuk skrin yang lebih besar.
Kaedah 1: Cipta Reka Bentuk Responsif Diutamakan Mudah Alih
Mula-mula, mulakan dengan mencipta pendekatan reka bentuk yang mengutamakan mudah alih. Untuk tujuan itu, ikuti arahan mengikut langkah yang disediakan di bawah.
Langkah 1: Buat Struktur HTML
Mula-mula, buat struktur HTML dan tambahkan ' Bootstrap ' di dalam
< ul >
< itu >< a href = '#' > Rumah < / a >< / itu >
< itu >< a href = '#' > Tentang kita < / a >< / itu >
< itu >< a href = '#' > perkhidmatan kami < / a >< / itu >
< itu >< a href = '#' > Hubungi Kami < / a >< / itu >
< / ul >
< / tidak>
< / pengepala>
< h1 > Selamat datang ke Petunjuk Linux < / h1 >
< hlm > Laman web tutorial. < / hlm >
< / bahagian>
< / utama>
< hlm > Hak Cipta Petunjuk Linux < / hlm >
< / pengaki>
< / badan >
Langkah 2: Gunakan CSS
Dalam bahagian badan, tetapkan “ font-family ” kepada “ sans serif ”. Tetapkan juga padding, margin dan warna latar belakang. Selepas itu gunakan CSS pada pengepala, pengaki dan navigasi:
badan {font-family : sans serif ;
margin : 0 ;
padding : 0 ;
warna latar belakang : #808080 ;
}
kepala {
warna latar belakang : ungu ;
warna : putih ;
padding : 8px ;
}
nav ul {
jenis-gaya senarai : tiada ;
padding : 0 ;
margin : 0 ;
}
kapal mereka {
margin : 4px 0 ;
}
nav ul li a {
warna : putih ;
hiasan teks : tiada ;
}
utama {
padding : 18px ;
}
pengaki {
warna latar belakang : merah jambu ;
warna : putih ;
penjajaran teks : pusat ;
padding : 8px ;
}
Seperti yang dapat diperhatikan, output di bawah telah mengesahkan bahawa reka bentuk adalah responsif yang mengutamakan mudah alih:
Kaedah 2: Gunakan Pertanyaan Media untuk Mencipta Reka Bentuk Responsif untuk Skrin yang Lebih Besar
Reka bentuk di atas juga boleh dibuat untuk skrin yang lebih besar seperti tablet dan desktop. Untuk tujuan itu, pengguna perlu memasukkan pertanyaan media dalam CSS. Lebar untuk tablet ialah ' 786px ” dan untuk desktop ialah “ 1024px ”.
Untuk menggunakan pertanyaan media, mula-mula masukkan “ @media teg ” dalam fail CSS. Selepas itu, nyatakan sifat 'lebar min' sebagai ' 768px ”. Ini bermakna apabila saiz skrin minimum '768px' atau ke atas dipenuhi, maka CSS berikut akan digunakan:
@media ( lebar min : 768px ) {badan {
Saiz huruf : 14px ;
}
kepala {
padding : 18px ;
}
nav ul {
paparan : lentur ;
}
kapal mereka {
margin : 0 8px ;
}
utama {
paparan : lentur ;
justify-content : ruang-antara ;
align-item : pusat ;
}
pengaki {
padding : 18px ;
}
}
Output di bawah menunjukkan bahawa reka bentuk juga responsif pada skrin yang lebih besar:
Kesimpulan
Untuk menyediakan reka bentuk responsif yang mengutamakan mudah alih, mula-mula buat struktur HTML dan tambahkan port pandangan. Selepas itu pautkan fail CSS dalam teg kepala. Kemudian, gunakan CSS berdasarkan reka bentuk responsif yang mengutamakan mudah alih. Tambahan pula, pengguna boleh menambah pertanyaan media CSS untuk melaraskan pada peranti mudah alih. Tulisan ini telah menunjukkan prosedur terperinci untuk menyediakan reka bentuk responsif yang mengutamakan mudah alih.