marctrix: Flexbox Layout funktioniert auf Windows Phone nicht

Beitrag lesen

SELF-Forum

Flexbox Layout funktioniert auf Windows Phone nicht

marctrix Homepage des Autors
+1 Informationen zu den Bewertungsregeln

Hej Caroline,

ist Dein Problem noch aktuell?

Flexbox wird ja nun recht durchgängig von den aktuellen Browsern und den meisten Vorgänger-Versionen unterstützt - auch ohne Vendor-Präfixe, die eh nicht das Gelbe vom Ei sind. Darauf würde ich verzichten. Ältere Browser zeigen dann alles untereinander an und es wirkt ein wenig, als wäre man auf einer mobilen Ansicht einer Webseite und nciht, als wäre es kaputt. Nutzer kennen das, weil in sozialen Medien zum Beispiel oft Links von Seiten geteilt werden, die mit dem Handy besucht wurden, so dass ein direkter Link zur Handy-Version eingestellt wird.

Insofern kann man damit IMHO gut leben.

Dann würde ich alle inline-Styles rauswerfen. Insbesondere bei responsiven Seiten solltest du keine Pixel-Angaben in den inline-Styles machen (im HTML für Bilder mittels width und height machen die kein Problem, weil du das in einem zentralen Stylesheet überschreiben kannst).

Weiterhin solltest Du bei der Erstellung des Layouts mit der Darstellung auf den kleinsten Geräten beginnen (mobile first).

Danach erst um größere Geräte (Tablets, Desktops) kümmern.

Flexbox hilft dabei, mit wenigen media-Queries auszukommen. Folgender Code reicht für ein simples, responsives Layout:


<body>
<header>
  <h1>Lorem</h1>
</header>

<main>
  <nav>
    <h2 class="visuallyhidden">Hauptnavigation</h2>
    <ul>
      <li><a href="foo.htm">Foo</a></li>
      <li><a href="bar.htm">Bar</a></li>
    </ul>
  </nav>

  <div class="content">
    <article>
      <h2>Heureka!</h2>
      <p>Lorem ipsum...</p>
      [..]
    </article>
  </div>

  <aside>
    <h2 class="visuallyhidden">Weiterführende Informationen</h2>
    <article>
      <h3>Verwandte Artikel</h3>
      <ul>
        <li><a href="foo.htm">Foo</a></li>
        <li><a href="bar.htm">Bar</a></li>
      </ul>
    </article>
  </aside>
</main>

<footer>
  <h2 class="visuallyhidden">Urheberrechtshinweis</h2>
  <p>&copy; 2016 by Caroline</p>
</footer>
</body>

main {
  display: flex;
  flex-flow: row wrap;
}
nav,
.aside {
  flex-basis: 20em;
  flex-grow: 1;
}
.content {
  flex-basis: 40em;
  flex-grow: 2;
}
@media screen and (min-width: 40em) {
    .content {
      order: -1;
    }
}

Habe das mal zum rumspielen online gestellt...

Mein Tipp: Mach neu! Beginne mit so etwas simplem und füge dann nach und nach hinzu, was dir noch fehlt, bis du mit dem Aussehen zufrieden bist. Teste zwischendurch immer wieder.

Wenn du die Dinge einfach hältst, passieren weniger Fehler!

Marc

Beitrag melden
+1
Informationen zu den Bewertungsregeln