\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Media Queries}
\usepackage[
pdftitle={Media Queries}
pdfsubject={Responsive Webdesign &amp; Media Queries - Browserweiche Smartphone, Tablet und PC}
pdfauthor={Udo Schmal}
pdfkeywords={Responsive Design, Smartphone, Tablet, PC, css, media query}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Media Queries
\singlespacing
{\LARGE \textbf{\label{sec:title}Responsive Webdesign \&amp; Media Queries}}

\singlespacing
{\large \textbf{\label{sec:subtitle}Browserweiche Smartphone, Tablet und PC}}

Mehr denn je wird im Internet Wert auf die Geräte abgestimmte Darstellung des Seiteninhalts Wert gelegt, für die Realisierung gibt es bislang kein Universalrezept, jedoch steht eines fest, bereits beim Entwerfen des eigentlichen Webauftritts sollte darauf geachtet werden, dass gewisse Regeln beim Anlegen des Seitenaufbaus beachtet werden müssen.

Existiert erst einmal ein Webauftritt und soll im Nachhinein ein mobiler Webauftritt realisiert werden ist im Regelfall ein größere Entwicklungsaufwand erforderlich als zum Entwickeln eines Responsive Webdesigns.

Es gibt unterschiedliche Herangehensweisen die schon alleine daraus resultieren ob der Weg von einen \&quot;großen Layout\&quot; zu einem \&quot;kleinen Layout\&quot; gewählt wird oder umgekehrt \&quot;Mobile First\&quot;, also eine Reduktion des Inhaltes erforderlich ist oder eine Expansion möglich ist!

Bei Responsive Design Webauftritten sollte bereits bei den Entwürfen darauf geachtet werden, das sie ins kleinste für sie angedachte Format passen, sicherlich sieht ein Entwurf  in großzügigen Abmessungen meist besser aus, allerdings scheitert es dann bei der Realisierung! Sehr hilfreich sind in dieser Phase Wireframes, falls ein Detail getreuer Entwurf existiert sollte dieser in Form eines Content-Reference-Wireframe zerlegt werden und dann sollten für alle weiteren kleineren Stufen ebenso Content-Reference-Wireframe angelegt werden, die sich jeweils an den kleinsten gültigen Abmessungen halten.

Sind die Abhängigkeiten der einzelnen Blöcke in der Struktur geklärt und deren Verhalten bei einer Größenänderung bzw. Änderung der Geräteausrichtung, können für die Abmessungen/Stufen mit Hilfe von Media Queries sowohl Positionierung und als auch Abmessungen, also Merkmale der Blöcke definiert werden. Erst im Anschluss sollten die Details im Stylesheet ausgearbeitet werden, wobei globale als auch nur in einer Stufe gültige Eigenschaften den richtigen Media Queries zugeordnet werden sollten, gelten Regeln über mehrere Stufen ist auch darüber nachzudenken ob nicht ein neuer kombinierter Media Query Sinn macht!

Wird zuerst ein Layout umgesetzt existieren unter Umständen Regeln oder sogar Anordnungen von Elementen die die Realisierung der weiteren Layouts erschweren, oder sogar nur über Tricks ermöglichen, die dann wiederum zu weiteren Problemen führen. Spätestens wenn Probleme auftreten sollte man sein vorgehen überdenken, die Struktur überprüfen und dann zumindest bei komplexen Seiten auf die bereits zuvor erwähnte Methode (Wireframes) zurückgreifen.

\href{https://www.gocher.me/code/media-queries.css}{media-queries.css}

In dem Beispiel habe ich einige Möglichkeiten aufgeführt man sollte sich aber nie an eine feste Struktur klammern sondern eher darauf achten, ab welcher Auflösung ein Aufbau nicht mehr sinnvoll ist, also z.B. auf einer Seite im Browser auf einem PC 16:9 kann ein Dreispalten-Layout super gut aussehen auf einem Tablet im Portrait Mode wären eher zwei Spalten angebracht und auf einem Smartphone eher eine Spalte, aber dazwischen existieren Grauzonen, denn schon im Bereich Smartphone/Tablet gibt es fast fließende Übergänge.

\textbf{ Ab welchem Grenzwert man nun genau Umschalten sollte ist vom Layout abhängig!}
\end{document}