Cara Menggunakan Pertanyaan Media dalam HTML dan CSS untuk Membuat Laman Web Responsif

Cara Menggunakan Pertanyaan Media dalam HTML dan CSS untuk Membuat Laman Web Responsif

Sekiranya anda ingin mengembangkan laman web / aplikasi web, maka mengetahui bagaimana membuat reka bentuk responsif sangat penting untuk kejayaan anda.





Pada masa lalu, penciptaan laman web yang dapat disesuaikan dengan ukuran layar yang berbeza adalah kemewahan yang harus diminta oleh pemilik laman web daripada pembangun. Namun, peningkatan penggunaan telefon pintar dan tablet kini menjadikan reka bentuk responsif sebagai keperluan dalam dunia pengembangan perisian.



Menggunakan pertanyaan media adalah cara terbaik untuk memastikan bahawa laman web / aplikasi web anda muncul dengan tepat seperti yang anda mahukan di setiap peranti.





Memahami Reka Bentuk Responsif

Ringkasnya, reka bentuk responsif berkaitan dengan penggunaan HTML / CSS untuk membuat susun atur laman web / aplikasi web yang disesuaikan dengan pelbagai ukuran skrin. Dalam HTML / CSS terdapat beberapa cara yang berbeza untuk mencapai respons dalam reka bentuk laman web:

  • Menggunakan unit rem dan em bukan piksel (px)
  • Menetapkan viewport / skala setiap halaman web
  • Menggunakan pertanyaan media

Apakah Pertanyaan Media?

Pertanyaan media adalah ciri CSS yang dirilis dalam versi CSS3. Dengan pengenalan fitur baru ini, pengguna CSS memperoleh kemampuan untuk menyesuaikan tampilan halaman web berdasarkan tinggi, lebar, dan orientasi perangkat / layar (mod landskap atau potret).



Baca lebih lanjut: Lembaran Menipu Properties CSS3 Yang Penting

Pertanyaan media menyediakan kerangka kerja untuk membuat kod sekali dan menggunakannya berulang kali sepanjang program anda. Ini mungkin tidak begitu berguna jika anda mengembangkan laman web dengan hanya tiga halaman web, tetapi jika anda bekerja untuk syarikat yang mempunyai ratusan laman web yang berbeza — ini akan terbukti menjadi penghemat masa yang besar.



Menggunakan Pertanyaan Media

Terdapat beberapa perkara berbeza yang perlu anda pertimbangkan semasa menggunakan pertanyaan media: struktur, penempatan, jangkauan, dan penghubung.

Struktur Pertanyaan Media

Contoh Struktur Pertanyaan Media


@media only/not media-type and (expression){
/*CSS code*/
}

Struktur umum pertanyaan media merangkumi:



  • Kata kunci @media
  • Kata kunci bukan / satu-satunya
  • Jenis media (yang boleh berupa skrin, cetak, atau ucapan)
  • Kata kunci dan
  • Ungkapan unik yang ditutup dalam kurungan
  • Kod CSS dilampirkan pada sepasang pendakap keriting terbuka dan tutup.

Berkaitan: Menggunakan CSS untuk Memformat Dokumen untuk Percetakan

Contoh Pertanyaan Media Dengan Kata Kunci Satu-satunya


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Contoh di atas menerapkan gaya CSS (khususnya warna latar belakang biru) hanya pada skrin peranti yang mempunyai lebar 450px ke bawah — jadi pada dasarnya telefon pintar. Satu-satunya kata kunci boleh diganti dengan kata kunci bukan dan kemudian gaya CSS dalam pertanyaan media di atas hanya akan berlaku untuk cetak dan ucapan.

Namun, secara lalai, deklarasi pertanyaan media umum berlaku untuk ketiga-tiga jenis media sehingga tidak perlu menentukan jenis media kecuali tujuannya adalah untuk mengecualikan satu atau lebih daripadanya.

Contoh Pertanyaan Media Lalai


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Penempatan Pertanyaan Media

Pertanyaan media adalah harta CSS; Oleh itu, ia hanya boleh digunakan dalam bahasa gaya. Terdapat tiga cara berbeza untuk memasukkan CSS dalam kod anda; namun, hanya dua kaedah yang memberikan kaedah praktikal untuk memasukkan pertanyaan media dalam program anda - CSS dalaman atau luaran.

Kaedah dalaman termasuk menambahkan tag ke tag file HTML, dan membuat pertanyaan media dalam parameter tag.

Kaedah luaran melibatkan membuat pertanyaan media dalam fail CSS luaran dan menghubungkannya ke fail HTML anda melalui tag.

Julat Pertanyaan Media

Sama ada pertanyaan media digunakan melalui CSS dalaman atau luaran, ada satu aspek utama dari gaya gaya yang dapat mempengaruhi bagaimana fungsi media berfungsi. CSS mempunyai susunan peraturan keutamaan. Ketika menggunakan pemilih CSS, atau dalam hal ini permintaan media, setiap pertanyaan media baru yang ditambahkan ke file CSS akan menggantikan (atau mendahului) yang sebelumnya.

Kod pertanyaan media lalai yang kami ada di atas mensasarkan telefon pintar (lebar 450px dan bawah), jadi jika anda ingin menetapkan latar belakang tablet yang berbeza, anda mungkin fikir anda boleh menambahkan kod berikut ke fail CSS yang sudah ada.

Contoh Pertanyaan Media Tablet


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Satu-satunya masalah adalah, kerana urutan keutamaan, tablet akan mempunyai warna latar belakang merah dan telefon pintar sekarang juga akan mempunyai warna latar merah kerana 450px dan di bawahnya di bawah 800px.

Salah satu cara untuk menyelesaikan masalah kecil ini adalah dengan menambahkan pertanyaan media untuk tablet sebelum yang ada untuk telefon pintar; yang terakhir akan mengatasi yang pertama dan anda sekarang akan mempunyai telefon pintar dengan warna latar belakang biru dan tablet dengan warna latar merah.

Namun, ada cara yang lebih baik untuk mencapai gaya yang berasingan untuk telefon pintar dan tablet tanpa mementingkan urutan keutamaan. Ini adalah ciri pertanyaan media yang dikenali sebagai spesifikasi jangkauan, di mana pembangun dapat membuat pertanyaan media dengan lebar maksimum dan minimum (julat).

Pertanyaan Media Tablet Dengan Julat


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Dengan contoh di atas, penempatan pertanyaan media dalam lembaran gaya menjadi tidak relevan kerana reka bentuk tablet dan telefon pintar menargetkan dua koleksi lebar yang berasingan.

Sekiranya anda tidak mahu memasukkan pertanyaan media ke dalam kod CSS anda, ada kaedah alternatif yang boleh anda gunakan. Kaedah ini melibatkan penggunaan pertanyaan media dalam tag fail HTML, jadi daripada memiliki satu lembar gaya besar yang mengandungi pilihan gaya untuk telefon pintar, tablet, dan komputer — anda boleh menggunakan tiga fail CSS yang terpisah dan membuat pertanyaan media anda dalam tag.

Teg adalah elemen HTML yang digunakan untuk mengimport gaya CSS dari lembaran gaya luaran. Teg ini mempunyai sifat media yang berfungsi dengan cara yang sama seperti pertanyaan media di CSS.




href='tablet.css'>


Kod di atas harus diletakkan pada tag fail HTML anda. Sekarang yang perlu anda lakukan ialah membuat tiga fail CSS yang terpisah dengan nama fail main.css, tablet.css, dan smartphone.css — kemudian buat reka bentuk khusus yang anda mahukan untuk setiap peranti.

Gaya dalam fail utama akan berlaku untuk semua layar dengan lebar lebih besar dari 800 piksel, gaya dalam file tablet akan berlaku untuk semua layar dengan lebar antara 450 piksel dan 801 piksel, dan gaya dalam fail telefon pintar akan berlaku untuk semua layar di bawah 451 piksel.

belanjawan terbaik semua dalam satu pencetak

Kini Anda Mempunyai Alat untuk Membuat Reka Bentuk Responsif

Sekiranya anda berjaya sampai ke akhir artikel ini, anda dapat mengetahui apa itu reka bentuk responsif dan mengapa ia berguna. Anda kini dapat mengenal pasti dan menggunakan pertanyaan media dalam fail CSS dan HTML. Selain itu, anda diperkenalkan dengan urutan keutamaan dalam CSS dan melihat bagaimana ia boleh mempengaruhi bagaimana fungsi pertanyaan media anda berfungsi.

Kredit Gambar: Ruang Negatif / Pexels

Berkongsi Berkongsi Tweet E-mel Cara Menetapkan Gambar Latar di CSS

CSS adalah alat yang kuat untuk menggayakan laman web. Mempelajari cara meletakkan gambar latar mengajar anda banyak asas CSS.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • Pembangunan Web
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pembangun Perisian Penuh dan Penulis Teknikal / Teknologi. Dia mempunyai kemampuan berbeza untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan bahan yang dapat difahami dengan mudah oleh mana-mana pemula teknologi. Dia minat menulis, mengembangkan perisian yang menarik, dan menjelajah dunia (melalui dokumentari).

Lagi Dari Kadeisha Kean

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan