Perbincangan ringkas tentang kemahiran tutorial html5 layout_html5 responsif

1. Apakah reka letak responsif?

Reka letak responsif ialah konsep yang dicadangkan oleh Ethan Marcotte pada Mei 2010. Ringkasnya, ini bermakna tapak web boleh serasi dengan berbilang terminal - dan bukannya membuat versi khusus untuk setiap terminal.

Konsep ini dilahirkan untuk menyelesaikan pelayaran Internet mudah alih. Reka letak responsif boleh menyediakan antara muka yang lebih selesa dan pengalaman pengguna yang lebih baik untuk pengguna pada terminal yang berbeza Dengan populariti semasa peranti mudah alih skrin besar, tidaklah keterlaluan untuk menggambarkannya sebagai trend umum.

Apabila semakin ramai pereka menggunakan teknologi ini, kami bukan sahaja melihat banyak inovasi, tetapi juga melihat beberapa corak membentuk.

2. Apakah kelebihan dan kekurangan reka letak responsif?

Kelebihan:

Fleksibiliti yang kuat apabila menghadapi peranti dengan resolusi berbeza
Dapat menyelesaikan masalah penyesuaian paparan berbilang peranti dengan cepat
Kelemahan:

Serasi dengan pelbagai peranti, beban kerja yang berat dan kecekapan rendah
Kod ini menyusahkan, unsur-unsur tidak berguna yang tersembunyi akan muncul dan masa pemuatan dipanjangkan
Malah, ini adalah penyelesaian reka bentuk kompromi, yang dipengaruhi oleh banyak faktor. Hasil yang kurang daripada optimum
Ia mengubah struktur reka letak asal tapak web pada tahap tertentu, yang boleh menyebabkan kekeliruan pengguna

3. Bagaimana untuk mereka bentuk reka letak responsif?

1. Bagaimana untuk menyelesaikan isu keserasian antara peranti yang berbeza?

Pertanyaan Media dalam CSS3 boleh menyelesaikan masalah ini.

2. Apakah nilai yang boleh diperolehi melalui pertanyaan media?

Lebar dan tinggi lebar peranti peranti, skrin paparan ketinggian peranti/peranti haptik.

Lebar dan ketinggian lebar tetingkap pemaparan, skrin paparan ketinggian / peranti sentuhan.

Arah pegang tangan peranti, orientasi mendatar atau menegak (potret|lanskap) dan pencetak, dsb.

Pencetak dot matriks nisbah aspek, dsb.

Pencetak matriks nisbah aspek-peranti, dsb.

Warna objek atau warna senarai warna, indeks warna dipaparkan pada skrin.

Peleraian peranti

3. Struktur dan penggunaan tatabahasa

Sintaks: @media nama peranti sahaja (keadaan pilihan) bukan (keadaan pilihan) dan (keadaan pemilihan peranti), peranti dua {sRules}

Penggunaan:

a. Contoh 1: Gunakan @media dalam pautan:

                    

ditinggalkan oleh HANYA dalam penggunaan di atas, terhad kepada paparan komputer Syarat pertama Max-Width merujuk kepada lebar maksimum antara muka pemaparan, dan syarat kedua MAX-DEVIDE-WIDTH merujuk kepada lebar maksimum peranti.

b. Benamkan @media dalam helaian gaya:

Salin kod

Kod adalah seperti berikut:

@media (min-peranti -width: 1024px) dan (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device- width:480px ) dan (max-device-width:1024px) dan (orientation:portrait) {srules}

Stellen Sie die Auflösung (Breite) des Computermonitors auf mindestens 1024 Pixel ein (und die maximale sichtbare Breite beträgt 989 Pixel). Bei Handheld-Geräten beträgt die Bildschirmbreite 480 Pixel ist, dass die Größe 480 parallel zum Boden ist) Handgerät; Die Bildschirmbreite ist größer oder gleich 480 Pixel und kleiner als 1024 Pixel und der CSS-Stil des Geräts ist vertikal platziert.

4. Responsives Layout implementieren

Code kopierenDer Code lautet wie folgt: