Posting ini akan menyebutkan pedoman yang diperlukan untuk menerapkan pertanyaan media.
Bagaimana Cara Menerapkan Kueri Media untuk Perangkat Seluler?
Kueri media dapat diterapkan ke perangkat seluler hanya dengan menyebutkan “ @media ” tag dan menentukan ukuran layar dalam kurung kecil. CSS untuk kueri media tersebut kemudian dapat ditambahkan di dalam kurung kurawal. Setiap kali ukuran layar memenuhi ukuran yang ditentukan oleh pengguna, permintaan media yang dinyatakan akan diterapkan.
Mari kita lihat contoh praktis untuk mempelajari penerapan kueri media untuk perangkat seluler.
Contoh: Membuat Layout yang Berubah dari Layout Dua Kolom menjadi Layout Satu Kolom dengan Menerapkan Media Query
Pada contoh di bawah ini, tata letak halaman web akan berubah dari tata letak kolom menjadi tata letak satu kolom:
Langkah 1: Buat Struktur HTML
- Pertama, buat file HTML dan tautkan file stylesheet CSS eksternal di dalamnya
bagian. - Kemudian, buat a
bagian dan tambahkan judul situs web menggunakan menandai. - Membuat dengan nama kelas “kelas kontainer” dan dualagi di dalamnya memiliki nama kelas “ kolom ”. < tubuh >
< h1 > Petunjuk Linux < / h1 >
< / tajuk>
< div kelas = 'kelas kontainer' >
< div kelas = 'kolom' >
< h2 > Bagian Satu < / h2 >
< P > Linux Hint adalah salah satu platform e-learning terbaik. < / P >
< / div >
< div kelas = 'kolom' >
< h2 > Bagian Kedua < / h2 >
< P > Linux Hint adalah salah satu platform e-learning terbaik. < / P >
< / div >
< / div >
< / tubuh >Langkah 2: Terapkan CSS
Pada bagian tubuh:- Pertama, tentukan bagian badannya dengan menuliskan “ tubuh ” tag dan menyebutkan tanda kurung kurawal.
- Di dalam kurung kurawal, tentukan jenis font, warna latar belakang, margin, dan padding.
Di
bagian:
- Tentukan warna teks, perataan teks, warna latar belakang, dan padding.
Di “kelas kontainer” div:
- Mengatur ' menampilkan ” nilai properti menjadi “ melenturkan ” untuk membuat Flexbox.
- Menggunakan ' membenarkan konten ” untuk menambahkan spasi antar konten dan menambahkan padding.
Di kelas kolom:
- Pertama, tentukan nilai yang dinyatakan ke “ melenturkan ” properti untuk menambahkan spasi di antara dua bagian tata letak.
- Setelah itu tambahkan warna background, border, padding, dan box-sizing.
Langkah 3: Terapkan Kueri Media
- Untuk menerapkan kueri media untuk perangkat seluler, pertama-tama, tambahkan “ @media ” tandai.
- Kemudian, tentukan nilai “ 768 piksel ” yang khas untuk perangkat seluler hingga “ lebar maksimal properti ” di dalam kurung kurawal kecil.
- Setelah itu, tentukan “ kolom ” nilai ke “ arah fleksibel ” properti yang akan berlaku untuk “ kelas wadah-kelas”. Ini akan mengubah dua kolom menjadi satu kolom setiap kali ukuran layar yang ditentukan terdeteksi.
- Terakhir, terapkan CSS pada “ kolom ” kelas dan tentukan “ batas ' Dan ' melenturkan ” nilai:
keluarga font: sans-serif;
latar belakang- warna : perak;
batas: 0 ;
lapisan: 0 ;
}
tajuk {
latar belakang- warna : #2f4f4f;
bantalan: 20 piksel;
teks- meluruskan : tengah;
warna : putih;
}
.wadah- kelas {
tampilan: fleksibel;
membenarkan- isi : ruang-antara;
bantalan: 20 piksel;
}
.kolom {
melenturkan: 0 1 perhitungan ( lima puluh % - 10 piksel ) ;
berbatasan : 1 piksel hijau pekat;
latar belakang- warna : putih;
ukuran kotak: kotak perbatasan;
bantalan: 20 piksel;
}
@ media ( maksimal- lebar : 768 piksel ) {
.wadah- kelas {
arah fleksibel: kolom;
}
.kolom {
melenturkan: 0 1 100 %;
margin-bawah: 20 piksel;
}
}Keluaran
Berikut adalah output halaman web setelah menerapkan media query. Output ini adalah tata letak responsif dua kolom:
Setiap kali layar memenuhi dimensi yang ditentukan menggunakan kueri media untuk seluler, layar berubah menjadi tata letak satu kolom:
Kesimpulan
Untuk menerapkan kueri media pada perangkat seluler, pertama-tama, sertakan “ area pandang ' dalam ' kepala ' bagian. Lalu, tulis CSS khusus desain seluler. Setelah itu, tambahkan media query dengan menggunakan tag “@media” dan menentukan ukuran layar ponsel. Misalnya, tentukan 768 piksel untuk tablet dan 480 piksel untuk ponsel. Artikel ini telah menjelaskan prosedur penerapan media queries untuk perangkat seluler.