Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="randacek_pro" data-source="post: 2029900" data-attributes="member: 326684">AW: Hilfe, Media Queries für mobile devicesHallo,ich möchte dich hierzu gern auf einen ähnlich gelagerten Thread hinweisen. Häufig wird "Responsive Design" dahingehend missverstanden, dass man eine Version pro Client-Device machen will...Das ist halt aber nicht das Ziel von responsive design <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" /> Es geht eher darum, dass das Design auf allen Ausgabemedien möglichst problemlos funktioniert.Natürlich kannst du zB sowas machen:[CODE]@media only screen and (min-device-width: 768px)and (orientation : portrait)[/CODE]oder[CODE]@media only screen and (min-device-width: 768px)and (orientation : landscape)[/CODE]Diese Anweisungen für spezielle Endgeräte (Viewport größer als 768px und Lagesensor gibt Orientation "portrait", oder "landscape" zurück) kann man auch in einem einzigen CSS notieren und die Werte lassen sich natürlich komplett an deine Bedürfnisse anpassen - es sind nur Beispiele.Gern möchte ich an dieser Stelle auch noch mal auf das Tutorials von Pascal hinweisen <a href="http://www.psd-tutorials.de/video-trainings/web/html-css/-/view/22915--responsive-webdesign-kaffee-am-meer-teil-4-media-queries" target="_blank">Video-Training » Responsive Webdesign » Teil 4 » Media Queries (ACHTUNG: kostet Punkte!)</a>Selbstverständlich kannst du auch[HTML]<link rel="stylesheet" type="text/css" href="deinCSS.css" media="only screen and (min-device-width: 768px) and (orientation : landscape)" />[/HTML]machen.Das bewirkt das gleiche, wird aber in deinem HTML <head> referenziert, statt in deinem CSS-Dokument...Welchen Code hast du denn bisher?Könntest du diesen mal posten? (HTML und CSS)So schlecht klingen die Angaben doch gar nicht - es sind ja immerhin aufeinander aufbauende Einstellungen. Wie gesagt, man sollte auch darauf verzichten, für jedes Gerät eine explizite eigene CSS-Datei zu referenzieren, da dies eigentlich am Sinn des Responsive Design vorbei geht.In deinem Beispiel geht er ja schon mit 3 Styles für Geräte ≤ 480px, dann 481 - 768px und dann > 768px bis 1232px...Also es sind ja "fließende" Werte - "zerschießen" solltest du da mit nix <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile    :)" loading="lazy" data-shortname=":)" />Kannst du derzeit eigentlich dein Design mal selber testen? Oder hast du es online?Sonst können die Forenmember nämlich auch mal schauen, auf ihren diversen Geräten und dir Rückmeldung geben...Lieber Gruß</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?