Catatan ini akan menyebut garis panduan yang diperlukan untuk melaksanakan pertanyaan media.
Bagaimana untuk Melaksanakan Pertanyaan Media untuk Peranti Mudah Alih?
Pertanyaan media boleh digunakan pada peranti mudah alih dengan hanya menyebut ' @media ” tag dan nyatakan saiz skrin dalam pendakap kecil. CSS untuk pertanyaan media itu kemudiannya boleh ditambah di dalam pendakap kerinting. Setiap kali saiz skrin memenuhi saiz yang ditentukan oleh pengguna, ia akan menggunakan pertanyaan media yang dinyatakan.
Mari kita tinjau contoh praktikal untuk mempelajari pelaksanaan pertanyaan media untuk peranti mudah alih.
Contoh: Buat Susun atur yang Berubah daripada Susun atur Dua Lajur kepada Satu Susun atur Lajur dengan Menggunakan Pertanyaan Media
Dalam contoh di bawah, reka letak halaman web akan berubah daripada reka letak lajur kepada reka letak satu lajur:
Langkah 1: Buat Struktur HTML
- Mula-mula, buat fail HTML dan pautkan fail helaian gaya CSS luaran dalam fail tersebut
bahagian. - Kemudian, buat a
bahagian dan tambahkan tajuk tapak web menggunakan tag. - Buat a dengan nama kelas 'kelas bekas' dan dua lagidi dalamnya mempunyai nama kelas ' kolum ”. < badan >
< h1 > Petunjuk Linux < / h1 >
< / pengepala>
< div kelas = 'kelas kontena' >
< div kelas = 'kolum' >
< h2 > Bahagian Satu < / h2 >
< hlm > Linux Hint ialah salah satu platform e-pembelajaran terbaik. < / hlm >
< / div >
< div kelas = 'kolum' >
< h2 > Bahagian Dua < / h2 >
< hlm > Linux Hint ialah salah satu platform e-pembelajaran terbaik. < / hlm >
< / div >
< / div >
< / badan >Langkah 2: Gunakan CSS
Pada bahagian badan:- Pertama, nyatakan bahagian badan dengan menulis “ badan ” tag dan menyebut pendakap kerinting.
- Di dalam pendakap, nyatakan keluarga fon, warna latar belakang, jidar dan pelapik.
Pada
bahagian:
- Tentukan warna teks, penjajaran teks, warna latar belakang dan padding.
Pada “kelas kontena” div:
- Menetapkan ' paparan ” nilai harta kepada “ lentur ” untuk mencipta Flexbox.
- Menggunakan ' justify-content ” untuk menambah ruang antara kandungan dan menambah padding.
Pada kelas lajur:
- Pertama, nyatakan nilai yang dinyatakan kepada ' lentur ” harta untuk menambah ruang antara dua bahagian susun atur.
- Selepas itu, tambahkan warna latar belakang, jidar, padding dan saiz kotak.
Langkah 3: Gunakan Pertanyaan Media
- Untuk menggunakan pertanyaan media untuk peranti mudah alih, pertama, tambahkan “ @media ” tag.
- Kemudian, nyatakan nilai ' 768px ” yang biasa untuk peranti mudah alih kepada “ lebar maksimum ” harta dalam pendakap kecil.
- Selepas itu, nyatakan ' kolum nilai ' kepada ' arah lentur ” harta yang akan terpakai kepada “ kelas kontena”. Ini akan menukar dua lajur menjadi satu lajur apabila saiz skrin yang ditentukan dikesan.
- Akhir sekali, gunakan CSS pada ' kolum 'kelas dan nyatakan' margin ” dan “ lentur ” nilai:
font-family: sans-serif;
latar belakang- warna : perak;
margin: 0 ;
padding: 0 ;
}
kepala {
latar belakang- warna : #2f4f4f;
padding: 20px;
teks- selaraskan : pusat;
warna : putih;
}
.bekas- kelas {
paparan: flex;
mewajarkan- kandungan : ruang-antara;
padding: 20px;
}
.kolum {
lentur: 0 1 calc ( lima puluh % - 10px ) ;
sempadan : 1px hijau pepejal;
latar belakang- warna : putih;
saiz kotak: kotak sempadan;
padding: 20px;
}
@ media ( maksimum- lebar : 768px ) {
.bekas- kelas {
flex-direction: lajur;
}
.kolum {
lentur: 0 1 100 %;
jidar bawah: 20px;
}
}Pengeluaran
Berikut ialah output halaman web selepas menggunakan pertanyaan media. Output ini ialah reka letak responsif dua lajur:
Setiap kali skrin memenuhi dimensi yang ditentukan menggunakan pertanyaan media untuk mudah alih, ia bertukar menjadi reka letak satu lajur:
Kesimpulan
Untuk melaksanakan pertanyaan media untuk peranti mudah alih, pertama sekali, masukkan ' tempat pandang ' di dalam ' kepala ” bahagian. Kemudian, tulis CSS khusus reka bentuk mudah alih. Selepas itu, tambahkan pertanyaan media dengan menggunakan teg “@media” dan nyatakan saiz skrin mudah alih. Sebagai contoh, nyatakan 768px untuk tablet dan 480px untuk telefon mudah alih. Artikel ini telah menerangkan prosedur untuk melaksanakan pertanyaan media untuk peranti mudah alih.