Bagaimana Membuat Tapak Mudah Alih Responsif dalam AJAX untuk Pemrograman HTML5 dan CSS3 - monyet

Pemaju web HTML5 dan CSS3 boleh menggunakan AJAX untuk membuat tapak mudah alih yang responsif. Salah satu cara untuk membuat laman web berfungsi dengan baik pada pelbagai resolusi ialah menyediakan peraturan CSS yang berbeza berdasarkan jenis media yang dikesan.

CSS3 mempunyai ciri baru yang luar biasa yang dipanggil pertanyaan media, yang membolehkan anda menentukan jenis media dan menentukan pelbagai ciri paparan. Anda boleh menggunakan spesifikasi ini untuk membina subset CSS yang seharusnya digunakan apabila penyemak imbas mengesan jenis atau saiz paparan tertentu.

Nyatakan jenis media

Peraturan @media membenarkan anda menentukan jenis output yang dimasukkan CSS harus diubah suai. Jenis media yang paling biasa ialah skrin, cetak, pertuturan, pegang tangan, unjuran dan tv. Terdapat lebih banyak, tetapi cetakan dan skrin hanya disokong secara universal.

Sebagai contoh, kod berikut akan menentukan saiz fon apabila pengguna mencetak dokumen:

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

CSS ini boleh dimasukkan ke dalam CSS biasa dokumen, tetapi ia biasanya perlu diletakkan pada akhir dokumen kerana ia memegang pengecualian dengan peraturan biasa. Anda boleh meletakkan kod CSS sebanyak yang anda mahu di dalam elemen @media, tetapi anda hanya perlu memasukkan kod CSS yang berkaitan dengan situasi khusus yang anda minati.

Bagaimana untuk menambah kelayakan

Sebagai tambahan untuk menyatakan jenis media, peraturan @media mempunyai helah yang sangat kuat. Anda boleh memohon syarat kelayakan khas kepada media.

Apabila pelayar lebih lebar daripada 500 piksel, anda boleh melihat teks hitam pada latar belakang putih. Tetapi membuat skrin lebih sempit, dan anda melihat sesuatu yang menarik.

Biasanya anda akan menggunakan helah ini untuk mengubah susun atur, tetapi mulakan dengan contoh warna yang lebih mudah berubah ini. Berikut adalah kod untuk contoh yang lebih mudah ini:

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

Demo Qualifier
Cuba ubah saiz halaman ini. Apabila halaman lebih lebar daripada 500 piksel, ia menunjukkan teks hitam pada latar belakang putih.
Apabila halaman lebih sempit daripada 500 piksel, warna-warna di belakang, memberikan teks putih pada latar belakang hitam.

Berikut ialah cara membina halaman yang menyesuaikan diri dengan lebar skrin:

1. Bina tapak anda seperti biasa.

   Ini adalah satu tempat di mana keseluruhan "kandungan berasingan dari susunatur" itu benar-benar terbayar. HTML yang sama akan mempunyai dua gaya yang berbeza.

2. Gunakan gaya CSS dengan cara biasa.

   Bina gaya standard anda dengan cara biasa - buat masa sekarang, semak gaya dalam halaman dengan tag.Gaya utama anda harus mengendalikan kes yang paling umum. (Biasanya, desktop bersaiz penuh.)

3. Bina peraturan @media.

   Peraturan CSS @media harus pergi pada akhir CSS normal.

4. Tetapkan lebar maksima: kualifier 500px.

   Kualifikasi ini menunjukkan bahawa peraturan di dalam segmen ini hanya akan digunakan jika lebar skrin lebih kecil daripada 500 piksel.

5. Letakkan peraturan kes khas di dalam set gaya baru.

   Mana-mana peraturan CSS yang anda tentukan di dalam @media rule akan diaktifkan jika kualifier itu benar. Gunakan peraturan ini untuk mengatasi CSS sedia ada. Perhatikan anda tidak perlu mentakrifkan semula segala-galanya. Hanya berikan peraturan yang masuk akal dalam konteks tertentu anda.

6. Tambah viewport.

   Peramban mudah alih kadang-kadang akan cuba menyelaraskan halaman supaya semua dapat dilihat sekaligus. Ini mengalahkan tujuan gaya khas, jadi gunakan metrik viewport untuk menunjukkan bahawa penyemak imbas harus melaporkan lebar sebenarnya. Ia juga sering berguna untuk mematikan penskalaan halaman kerana tidak perlu lagi.

Dalam contoh ini, pelayar sentiasa memakai gaya utama (teks hitam pada latar belakang putih). Kemudian ia melihat peraturan @media untuk melihat apakah kelayakan itu benar.

Jika lebarnya kurang daripada 500 piksel, lebar maksimum: kualifier 500px dinilai sebagai benar, dan semua kod CSS di dalam segmen @media diaktifkan. Penyemak imbas kemudian menyimpan kedua-dua set CSS dan menggunakan CSS yang betul berdasarkan status peraturan.