mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:47 Benutzername: Passwort: Auto-Login

Thema: Responsive Design - verschiedene Image Varianten vom 25.01.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Responsive Design - verschiedene Image Varianten
Seite: 1, 2  Weiter
Autor Nachricht
Tormentor667
Threadersteller

Dabei seit: 20.09.2006
Ort: Lauterstein
Alter: 39
Geschlecht: Männlich
Verfasst Sa 25.01.2014 21:52
Titel

Responsive Design - verschiedene Image Varianten

Antworten mit Zitat Zum Seitenanfang

Liebe Mediengestalter,

ich habe momentan im Bereich CSS und Responsive Design ein kleines Problem und zwar verstehe ich noch nicht so ganz, wie ich meiner Internetseite beibringen kann, dass ab einer bestimmten "Screen"-Breite ein Element ausgeblendet und dafür ein anderes dargestellt werden soll.

Generell geht es hierbei um ein bestimmtes Bild, welches per div als Background angezeigt wird. Das sieht auf einem Desktopmonitor super toll aus, auf einem Tablet oder Smartphone möchte ich aber ein kleineres Motiv anzeigen. Wie genau löse ich das?

Vielen Dank schonmal für eure Hilfe,
beste Grüße,
Tormi
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Sa 25.01.2014 22:56
Titel

Antworten mit Zitat Zum Seitenanfang

Siehe http://stackoverflow.com/questions/9506069/media-queries-and-background-images
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Sa 25.01.2014 23:36
Titel

Antworten mit Zitat Zum Seitenanfang

Mit 29 müsste man eigentlich Responsive Design bei Google eingeben und mehr als die ersten drei Treffer lesen können. * Nee, nee, nee * *pah*
  View user's profile Private Nachricht senden
Tormentor667
Threadersteller

Dabei seit: 20.09.2006
Ort: Lauterstein
Alter: 39
Geschlecht: Männlich
Verfasst Mo 27.01.2014 13:37
Titel

Antworten mit Zitat Zum Seitenanfang

pantonine hat geschrieben:
Mit 29 müsste man eigentlich Responsive Design bei Google eingeben und mehr als die ersten drei Treffer lesen können. * Nee, nee, nee * *pah*

Gratuliere, du gehörst offiziell mit unbekanntem Alter zu den Personen, die das Prinzip eines Forums immer noch nicht verstanden haben.

@ChrisKam - Vielen Dank, d.h. mit Angaben wie "@media (max-width: 600px) {" kann ich meinem CSS sagen, dass es diese Ausgabe nur anzeigen soll, insofern mein Browserfenster (bzw. das Ausgabemedium) unter 600 Pixeln groß ist, ist das richtig? D.h. für eine seamless Umschaltung bräuchte ich dann zwei Settings, einmal

@media (max-width: 600px) { # }

für z.Bsp. ein Tablet und einmal

@media (min-width: 601px) {

für Desktopansichten?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mo 27.01.2014 15:06
Titel

Antworten mit Zitat Zum Seitenanfang

responsive/adaptive webdesign ist zwar noch viel mehr als nur "media queries", aber es gibt in diesem Zusammenhang auch noch etwas wie mobile-first und desktop-first.

Mit der "mobile-first"-Methode, definierst du CSS-Werte für Mobilgeräte (und Standards für alle viewports) ganz oben in deiner CSS-Datei. Danach kommen die Media Queries welche alle mit der Abfrage "min-width: ..." arbeiten und bestimmte Werte und Standards überschreiben.

Kurz: Ab einer Mindestbreite von 768px ist mein Hintergrund blau statt rot.


Anders herum arbeitet natürlich die "desktop-first"-Methode mit "max-width: ..."-Abfragen.
Welche Methode du nutzt hängt von den Inhalten, dem Layout und der Zielgruppe der Internetpräsenz ab.


Zuletzt bearbeitet von SimonDerDude am Mo 27.01.2014 15:09, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Tormentor667
Threadersteller

Dabei seit: 20.09.2006
Ort: Lauterstein
Alter: 39
Geschlecht: Männlich
Verfasst Mo 27.01.2014 15:11
Titel

Antworten mit Zitat Zum Seitenanfang

@SimonDerDude - Danke für die genaue Beschreibung, das hilft mir, die Sache etwas genauer zu kategorisieren. Ich muss selber zugeben, ich bin eigentlich aus dem Printbereich und habe mir über die Jahre hinweg selber vieles im Webbereich angeeignet. Dadurch dass das Thema Smartphones und Tablets nun aber so akut ist, kommt man nicht drumrum, sich weiterzubilden. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Frauenlob

Dabei seit: 29.01.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 29.01.2014 12:18
Titel

Antworten mit Zitat Zum Seitenanfang

gibt es eigentlich responsive desgins die nur für die mobile ansicht geeignet sind? also quasi andersherum? ich sag nicht dass das gut ist, nur frage ich mich ob es so etwas gibt..?!
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 29.01.2014 12:33
Titel

Antworten mit Zitat Zum Seitenanfang

Frauenlob hat geschrieben:
gibt es eigentlich responsive desgins die nur für die mobile ansicht geeignet sind ...

Apps?
Vielleicht solltest du dich auch erst mit den Begrifflichkeiten auseinandersetzen Grins


Zuletzt bearbeitet von SimonDerDude am Mi 29.01.2014 12:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Responsive Image Map
Responsive Image Slider mit versch. Bildgrößen
Responsive Design - Spaltenlayout
Responsive Design oder feste Breite
Input-Felder/Eingabefelder im Responsive Design
jssor Slider mit responsive Design aber ohne skalierende But
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.