Cara Membuat Situs Mobile Responsif di AJAX untuk Pemrograman HTML5 dan CSS3 - dummies

Pengembang web HTML5 dan CSS3 dapat menggunakan AJAX untuk membuat situs seluler yang responsif. Salah satu cara untuk membuat situs bekerja dengan baik pada beberapa resolusi adalah dengan memberikan aturan CSS yang berbeda berdasarkan jenis media yang terdeteksi.

CSS3 memiliki fitur baru yang mengagumkan yang disebut kueri media , yang memungkinkan Anda menentukan jenis media dan menentukan berbagai fitur pada layar. Anda dapat menggunakan spesifikasi ini untuk membangun subset dari CSS yang harus digunakan saat browser mendeteksi jenis atau ukuran tampilan tertentu.

Tentukan jenis media

Aturan @media memungkinkan Anda menentukan jenis keluaran yang harus dimodifikasi CSS. Jenis media yang paling umum adalah layar, cetak, ucapan, genggam, proyeksi, dan tv. Masih ada lagi, tapi hanya cetak dan layar yang didukung secara universal.

Misalnya, kode berikut akan menentukan ukuran font saat pengguna mencetak dokumen:

@media print {body {font-size: 10pt;}}

CSS ini dapat disisipkan ke dalam CSS normal dokumen, tapi biasanya harus ditempatkan di akhir dokumen karena berisi pengecualian terhadap peraturan normal. Anda dapat menempatkan kode CSS sebanyak yang Anda inginkan di dalam elemen @media, namun sebaiknya Anda meletakkan kode CSS yang sesuai dengan situasi spesifik yang Anda minati.

Cara menambahkan kualifikasi

Selain menentukan jenis media, aturan @media memiliki trik lain yang sangat kuat. Anda bisa menerapkan syarat kualifikasi khusus ke media.

Bila browser lebih lebar dari 500 piksel, Anda dapat melihat teks hitam di latar belakang putih. Tapi buat layarnya lebih sempit, dan Anda melihat sesuatu yang menarik.

Biasanya Anda akan menggunakan trik ini untuk mengubah tata letak, tapi mulailah dengan contoh perubahan warna yang sederhana ini. Inilah kode untuk contoh sederhana ini:

narrowBlack. tubuh html {warna: hitam; background-color: white;} @media (max-width: 500px) {body {warna: putih; background-color: black;}}

Demo Qualifier
Cobalah mengubah ukuran halaman ini. Bila halaman lebih lebar dari 500 piksel, halaman ini menunjukkan teks hitam di latar belakang putih.
Bila halaman lebih sempit dari 500 piksel, warnanya terbalik, memberi teks putih di latar belakang hitam.

Berikut adalah cara membuat halaman yang sesuai dengan lebar layar:

1. Bangun situs Anda seperti biasa.

   Ini adalah satu tempat di mana seluruh materi "konten terpisah dari tata letak" benar-benar terbayar. HTML yang sama akan memiliki dua gaya yang berbeda.

2. Terapkan gaya CSS dengan cara biasa.

   Bangun gaya standar Anda dengan cara biasa - untuk sekarang, sematkan gaya di halaman dengan tag.Gaya utama Anda harus menangani kasus yang paling umum. (Biasanya, desktop ukuran penuh.)

3. Bangun sebuah peraturan @media.

   Aturan @media CSS harus berada di akhir CSS biasa.

4. Tetapkan kualifikasi max-width: 500px.

   Kualifikasi ini menunjukkan bahwa aturan di dalam segmen ini hanya akan digunakan jika lebar layar lebih kecil dari 500 piksel.

5. Tempatkan aturan kasus khusus di dalam set gaya baru.

   Aturan CSS yang Anda tentukan di dalam aturan @media akan diaktifkan jika kualifikasi benar. Gunakan aturan ini untuk mengganti CSS yang ada. Perhatikan bahwa Anda tidak perlu mendefinisikan ulang semuanya. Berikan saja aturan yang masuk akal dalam konteks khusus Anda.

6. Tambahkan area pandang.

   Browser mobile kadang-kadang mencoba untuk membuat ulang halaman sehingga semuanya bisa dilihat sekaligus. Ini mengalahkan tujuan gaya khusus, jadi gunakan metatag viewport untuk menunjukkan bahwa browser harus melaporkan lebar sebenarnya. Ini juga sering berguna untuk mematikan penskalaan halaman karena seharusnya tidak lagi diperlukan.

Dalam contoh ini, browser selalu menerapkan gaya utama (teks hitam di latar belakang putih). Lalu, lihat aturan @media untuk melihat apakah kualifikasi benar.

Jika lebarnya kurang dari 500 piksel, kualifikasi max-width: 500px dievaluasi menjadi benar, dan semua kode CSS di dalam segmen @media diaktifkan. Browser kemudian menyimpan kedua set CSS dan menerapkan CSS yang benar berdasarkan status aturan.