Hallo

1) Am sinnvollsten erstellst du eine einfache Beispielseite.

padding-Angaben in Prozent nehmen als Grundlage grundsätzlich die Breite. Wenn für padding-top und / oder padding-bottom Prozentwerte angegeben werden ändern die Werte sich immer und nur bei Veränderung der Breite. Wenn die Höhe geändert wird ändert sich jedoch nichts.

Für Prozentangaben gibt es im CSS jede Menge Grundlagen. Und das sind häufig nicht die von Webseitenerstellern erwarteten. Die musst du halt lernen und beachten.

2) Der Clearfix-Hack ist ein inoffizieller Oberbegriff, hinter dem unterschiedliche technische Lösungen stehen können. Es gibt also nicht nur den einen Clearfix-Hack sondern verschiedene. Welcher verwendet werden sollte hängt vom Quelltext und anderen CSS-Angaben ab.

Ein Clearfix-Hack hat nichts mit Elementgrößen zu tun sondern hat die Aufgabe Floats zu beenden oder einzuschließen. Neben der clear-Anweisung sind es die einzigen Möglichkeiten unerwünschte Auswirkungen von Float zu verhinden.

3) Korrekte Skalierung heißt nur, dass die Größenanpassung auf hochauflösenden Displays so erfolgt wie es von den meisten Webseitenerstellern erwartet wird. Also immer, wenn die Auflösung umgerechnet werden muss, weil sonst zum Beispiel die Schrift viel zu klein angezeigt werden würde.

Die Viewport-Anpassung gehört offiziell überhaupt nicht zum CSS, sondern wurde von Apple eingeführt. Da sie sich bewährt hat haben alle anderen Browserhersteller die Anpassung in ihre Browser eingebaut.

4) Position absolute sollte von Anfängern absolut nicht verwendet werden. Für resposive Design ist Position absolute in der Regel hinderlich. Mit Einführung von HTML5 und CSS3 sind fast alle Position-Angaben (also auch relative) in der Regel überflüssig geworden.

Also einfach weglassen. Anleitungen, die sich noch ausführlich mit Position-Angaben beschäftigen sind in der Regel veraltet.

5) Siehe 4: Lass es bleiben.

6) Irgendwie gräbst du veraltetes HTML und CSS aus. Hover-Angaben lösen Aktionen aus wenn der Mouszeiger über einem Element schwebt. Problem: Die heute in der Mehrzahl von Besuchern verwendeten Touchscreens kennen keine Hover-Effekte.

Also auch einfach weglassen. Oder halt für aufwendige Fallbacks sorgen.

7) Den Begriff kenne ich nicht. Auf JavaScript sollte so weit wie möglich verzichtet werden. Zum einen sind JavaScript-Lösungen um das 10fache oder noch langsamer als gleichwertige CSS-Lösungen. Zum anderen haben viele Besucher JavaScript in ihren Browsern blockiert, zum Beispiel um unerwünschte Werbung zu blockieren. Also sollten auch für JavaScript-Anweisungen immer Fallbacks erstellt werden.

Auch andere Lösungen solltest du am besten von Beginn an vermeiden.

Zum Beispiel das br-Element verwenden wenn Abstände mit CSS erstellt werden können.

Oder leere Container mittels width und height Größen geben. Die verhalten sich anderes als mit Inhalt erstellte Container. Grundsatz: Die Größe von Containern soll sich immer nach ihrem Inhalt richten.

Statt div-Elementen sollten so weit möglich dafür andere HTML5-Container verwendet werden. Das ist in den HTML-Regeln festgeschrieben und verbessert die Übersichtlichkeit von Quelltexten enorm.

Und verwende immer komplette HTML-Seiten mit sinnvollem Inhalt, da du sonst schlicht nicht siehst was für einen Unsinn du grade erstellst. Also im HTML-Quelltext zumindest header, main und footer.

Verwende zudem bei der Erstellung von Versuchsseiten Rahmen und / oder poppige, unterschiedliche Hintergrundfarben.

Gruss

MrMurphy