Perbincangan ringkas tentang kemahiran tutorial html5 layout

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 kopieren Der Code lautet wie folgt: width – Die Breite des Ansichtsfensters height – die Höhe des Ansichtsfensters initial-scale – das anfängliche Skalierungsverhältnis minimum-scale – das minimale Verhältnis, auf das der Benutzer zoomen darf Maximum-Scale – das maximale Verhältnis, auf das der Benutzer zoomen darf user-scalable – ob der Benutzer manuell skalieren kann --> Sie müssen nur css3-mediaqueries.js am Kopf der Seite zitieren –> http:/ /css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> > Document /** Die Designidee ist sehr einfach. Definieren Sie zunächst die feste Breite unter dem Standardbrowser (wenn die Auflösung des Standardbrowsers 1024 Pixel beträgt, stellen wir die Breite auf 980 Pixel ein), und verwenden Sie dann Media Query, um die zu überwachen Die Browsergröße ändert sich. Wenn die Auflösung des Browsers weniger als 1024 Pixel beträgt, stellt die Breite der Seite über das von Media Query voreingestellte Stylesheet ein Die Unterseite wird je nach Browser angezeigt und kann entsprechend angepasst werden. Ändert sich der sichtbare Bereich des Browsers auf einen bestimmten Wert (z. B. 650 Pixel), werden die Strukturelemente der Seite entsprechend dem von Media Query voreingestellten Cascading Style Sheet entsprechend angepasst. Schauen Sie sich unser Beispiel an: **/ /* Wenn der sichtbare Bereich des Browsers weniger als 980 Pixel beträgt */ @media screen und (max-width: 980px) { #wrap { width: 90%; margin:0 auto;} #content {width: 60%;padding: 5%;} #sidebar {width: 30%;} #footer {padding: 8% 5%;margin-bottom: 10px;} } /* Wenn der sichtbare Bereich des Browsers weniger als 650 Pixel beträgt * / @media screen and (max-width: 650px) { #header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;} # content {width: auto; float: none; margin: 20px 0;} #sidebar {width: 100%; float: none;**Für bessere Anzeigeeffekte müssen wir häufig die Anfangswerte einiger CSS-Eigenschaften formatieren: *** / /* Deaktivieren Sie die automatische Anpassung der Schriftgröße in Safari auf dem iPhone*/ html { -webkit-text-size-adjust: none; } /* Setzen Sie HTML5-Elemente auf Blöcke */ article, aside, details, figcaption, Figure, footer, header, hgroup, menu , nav, section { display: block; } /* Adaptive Anpassungen wie Bilder und festlegen videos*/ img { max-width: 100%; height: auto; width: auto9; /* ie8 */ } .video embed, .video Objekt, .video iframe { Breite: 100 %; Höhe: automatisch; }