Flexboxen & Media Queries

  • Nein, leider nicht. Das mit den hochauflösenden Displays ist eine Sache, in die ich mich selber noch nicht so eingearbeitet habe. Eine richtige Wissenschaft für sich, auch wenn es darum geht, Bilder verschiedener Auflösung einzubinden. Man sieht ja, dass die Pixelbreite u. U. kein geeignetes Kriterium mehr ist, um zwischen Desktop und Handy zu unterscheiden. Es gibt da eine Pixeldichte, auf die man auch in CSS Zugriff hat, aber alles noch nicht richtig ausgereift mit teilweise proprietärer Syntax.

  • Ein typisches Anfängerproblem ist die Darstellung von Webseiten an bestimmte Geräte anpassen zu wollen. Das hat nie funktioniert und bei der heutigen Vielfalt der Endgeräte ist das von vornherein zum Scheitern verurteilt.


    Bewährt hat sich hingegen die Breite von Containern auf den Inhalt der Webseite hin auszurichten. Das Vorgehen ist auch zukunftssicher.


    Gleichzeitig hilft die Technik "Mobile First", nach der Webseiten zunächst für schmale Fenster (nicht nur schmale Bildschirme) erstellt werden.


    Dazu gehört zunächst den Inhalt der Webseite zu erstellen. Leere Webseiten funktionieren anders als Webseiten mit Inhalt und sind deshalb weder zum Lernen noch zum Testen geeignet. Deshalb hat Smpervivum auch Schwierigkeiten dir so zu helfen, dass du das verstehst.


    Beim aktuellen HTML (HTML5) sind die Anwendungsregeln auch viel eindeutiger als in den Vorgängerversionen gefasst. Ein sauberer HTML-Quelltext hilft auch bei der folgenden Gestaltung einer Webseite.


    Breiten- und Höhenangaben brauchen dann auch nur noch sehr sparsam eingesetzt werden, auch das hilft den Browsern zu einer sinnvollen Darstellung.

  • Danke für eure Unterstützung :)


    Zitat

    MrMurphy

    Ein typisches Anfängerproblem ist die Darstellung von Webseiten an bestimmte Geräte anpassen zu wollen. Das hat nie funktioniert und bei der heutigen Vielfalt der Endgeräte ist das von vornherein zum Scheitern verurteilt.


    Bewährt hat sich hingegen die Breite von Containern auf den Inhalt der Webseite hin auszurichten. Das Vorgehen ist auch zukunftssicher.

    Aber wie funktioniert das konkret ?


    Komischerweise funktioniert das mit diesem Code problemlos. Ich verstehe aber nicht warum.

    Code
    @media screen and ( max-width: 767px ) {
    #row {flex-direction: column;}
    .content {width: 100%;}
    .sidebar {width: 100%;}
    }
  • Zitat

    Komischerweise funktioniert das mit diesem Code problemlos. Ich verstehe aber nicht warum.

    Das habe ich auch zunächst nicht verstanden, denn das Display deines Samsung-Handys hat eine Breite von über 1000px und dürfte mit dieser Mediaquery eigentlich nicht auf column-Layout umschalten. Ich habe jedoch weiter recherchiert und mit meinem Samsung S4 getestet und dies gefunden:

    https://webplatform.github.io/…/understanding-css-units/

    Sie schreiben dort:

    Zitat

    The CSS pixel is a ‘reference’ pixel, not a device pixel. This is misleading and, personally, I prefer the notion of ‘user unit’ that SVG uses because I think it is easier to then explain the mapping to physical units and device pixels. But once one understands that a ‘px’ is actually a reference, not a device pixel, things make more sense. The thing to remember is that a CSS px is an abstract unit and there is a ratio controlling how it a) maps to actual device pixels and b) maps to physical units (in a fixed way, the ratio is always 96 CSS px to an inch).

    D. h. die Pixel von CSS haben nichts mit den Pixeln des Displays zu tun. Offenbar ergibt sich die Breite in CSS-Pixeln durch die Breite des Displays in physikalischen Pixeln dividiert durch devicePixelRatio. Und das heißt weiter, dass die Berechnung, die ich in #22 erwähnt habe, automatisch durch den Browser stattfindet, man braucht sich darum nicht zu kümmern.


    Bei meinem S4 wird eine devicePixelRatio von 3 angezeigt und eine CSS-Breite des window von 360px (im Hochformat).

  • Danke, das ergibt Sinn. Ich habe geglaubt, das sei gleich.


    Ich glaube, dass ich verstanden habe was MrMurphy mir erklären wollte :)


    Man kann mit Media Queries Endgeräte direkt ansprechen. Problematisch ist dabei, dass man so nicht vielen Endgeräten gerecht werden kann. Man kann aber auch eigene Breakpoints setzen und das an den Punkten an dem das eigene Layout nicht funktioniert. Letzteres ist die elegantere Variante. Soweit korrekt ? :)


    Doch wie kann ich diese eigenen Breakpoints ermitteln ?

  • Zitat

    Doch wie kann ich diese eigenen Breakpoints ermitteln ?


    Wie ich geschrieben habe: Zunächst die Webseite in HTML erstellen, dabei nur ein paar grundsätzliche CSS-Angaben machen und dann ausprobieren und schauen.


    Ohne Inhalt ist eine sinnvolle Gestaltung von Webseiten nicht möglich.

  • Nein.


    Erst mal den gesamten HTML-Quelltext fertigmachen damit man das Verhalten der Seite überhaupt beurteilen kann.


    Dann mit schmalem Fenster beginnen und schauen, wenn es sinnvoll ist, (in der Regel) Container anders anzuordnen. Und das dann nacheinander ins CSS eintragen.


    Eintragungen ins CSS also erst wenn sie sinnvoll sind. Und entweder nur min-width-Angaben verwenden oder nur max-width-Angaben.

  • Es haben sich noch ein paar weitere Fragen ergeben :)

    Bei einem normalen Layout habe ich den Content zentriert indem ich der Division eine klasse mit beispielsweise 15PX Padding zugewiesen habe. Wie mache ich das mit Flexbox ?

    Das Problem ist, dass ich nicht weiß wie ich die zusätzlichen 30PX mit einberechnen kann.

    Besonders nicht, wenn ich flex:1&3 verwende.



    Ich verzweifel an der responsiven Flexbox Navigation kennt jemand ein gutes Tutorial dafür ?

    Scheinbar gibt es so viele unterschiedliche Lösungen das zu realisieren.

  • Zitat

    Bei einem normalen Layout habe ich den Content zentriert indem ich der Division eine klasse mit beispielsweise 15PX Padding

    Das verstehe ich nicht, Padding fügt nur einen Innenabstand hinzu und zentriert nichts. Text kann man sehr einfach horizontal mit text-align:center; zentrieren und Flexitems mit align-items: center; für den Flexcontainer. Erkläre doch mal genauer, was Du unter Zentrierung verstehst und welche Elemente Du zentrieren willst.

  • Wenn man Content beispielsweise Text in eine DIV packt, dann gibt es keinen Seitenabstand. Ich mache das bei einem normalen Layout folgendermaßen ;


    <div id=“content“ class=“abstand“><\div>


    .abstand {

    padding: 15px;

    }


    Diese Lösung würde ich jetzt gerne auf mein Flexlayout übertragen. Das Problem ist, dass ich nicht weiß wie ich diese zusätzlichen 30px auf flex: 1&3 übertragen kann. Kann ich nicht mit prozentualen Werten arbeiten ? Macht das einen Unterschied ob ich jetzt prozentuale Werte oder flex:1&3 verwende ?

  • Ich habe zwei nebeneinander liegende Boxen, dessen Größe ich mit flex: 3; & flex: 1; bestimmt habe. Wenn ich der ersten Box jetzt 15Px padding zuweise, dann zersprengt es das Layout. Ich muss ja diese zusätzlichen 30px miteinberechnen.


    Mit Pixeln ist das kein Problem, aber wie kann ich diese zusätzliche Größe bei flex: 3&1 miteinbeziehen ?


    Geht das überhaupt oder müsste ich jetzt alles prozentual angeben ?

    Ich hoffe, dass es jetzt ein bisschen verständlicher ist.

  • Zitat

    Wenn ich der ersten Box jetzt 15Px padding zuweise, dann zersprengt es das Layout. Ich muss ja diese zusätzlichen 30px miteinberechnen.

    Nein, das ist nicht nötig, wenn Du konsequent Flexlayout verwendest. Ich habe es gerade getestet mit dem Layout, das Du früher gepostet hattest. Am besten postest Du nochmal das vollständige HTML und CSS.

  • Nachdem ist das padding hinzugefügt habe besteht das Problem, dass sobald der Breakpoint erreicht ist .sidebar breiter ist als #content.Ich habe das Problem gelöst. Scheinbar bin ich mit Klassen&Division ein bisschen durcheinander gekommen.

  • Danke :)))

    Es hat auch daran gelegen, dass content div&class zugleich gewesen ist, sodass width:100% ignoriert worden ist.


    Zitat

    Nein, das ist nicht nötig, wenn Du konsequent Flexlayout verwendest.


    Das heißt, dass im Gegensatz zum statischen Layout das bei Flexbox automatisch mit einberechnet wird ? Wofür brauche ich dann box-sizing ?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!