Rolf B: Bekomme Responsive-Design nicht hin

Beitrag lesen

Hallo Markus,

da ist einiges zu tun bei Dir ;)

Zunächst mal: Es ist heute üblich, Schriftgrößen relativ zu der vom User eingestellten Default-Schriftgröße festzulegen. Dazu bezieht man sich auf die Größeneinheiten em und rem. "em" ist die Breite eines "m" in der gewählten Schriftart. Legst Du für ein Element eine Breite von 10em fest, dann ist es so breit wie 10 m in der Schrift, die für das Element festgelegt ist. In den meisten Browsern ist - sofern die Defaults gelten - 16px, aber darauf verlässt man sich nicht. Der User kann einen Zoom eingestellt haben. "rem" steht für "root em", das sind die m in der Schriftart des body, damit bist Du unabhängig von Schriften, die irgendwo in der Elementhierarchie des DOM eingestellt wurden.

Dementsprechend setzt man auch keine Media-Breaks in Pixel. Du überlegst Dir, welche Umschaltpunkte für deine Inhalte sinnvoll sind, gemessen in em. Wenn Dein Impressum bspw. 15em benötigt, dann legst Du eine Mindestbreite von 15em fest. Den media break, ab dem die Darstellung untereinander erfolgt, sollte dann bei 25em oder 30em liegen, damit Du keine Darstellungen bekommst wo das Bild zu sehr gequetscht ist.

Und drittens gilt: Mobile first (oder "kleiner Bildschirm hat Vorrang"). Du designst deine Seite so, dass sie ohne Mediabreaks auf einem Smartphone oder in einem kleinen Desktopfenster brauchbar aussieht. Und dann fügst Du mit Media-Abfragen zusätzliche Styles hinzu, die bei breiteren Fenstern zu einer besseren Platznutzung führen.

Viertens ist ein Container-DIV etwas, was in vielen Beispielen zu sehen ist - aber es ist unnötig. Wenn Deine Seite nicht mehr enthält als dein Beispiel zeigt, kannst Du das body-Element als Container nutzen. Aber für meinen Vorschlag lasse ich es mal drin, ich weiß ja nicht, ob du noch anderes auf der Seite hast.

Es ist auch üblich, statt einer Div-Wüste semantisch sprechendere Elemente zu verwenden. HTML5 bietet eine Menge davon. Was für Dich richtig ist, hängt auch vom Rest des Seiteninhalts ab, aber wenn Du NUR das Bild und den Impressumtext hast, dann kann das Bild ein <aside> sein und das Impressum wäre <main>. Das Bild kann auch eigentlich ein <img> sein - es sei denn, du willst CSS Features für Hintergrundpositionierung nutzen. Eventuell könnte man das Bild sogar als Hintergrund des Containers setzen und auf das <aside> (oder .bild div bei Dir) ganz verzichten. Das lasse ich jetzt aber mal bleiben.

Ich würde es so schreiben:

<main>
	<aside></aside>
	<article>
    <h1>Impressum</h1>
    <p>Meine Firma
       Meine Strasse
       D-PLZ Ort
       Deutschland</p>
    <p>Ust.IdNr: DE1122334455</p>
    <p>Telefon: 0800 - 11 22 333
       Telefax: 0800 - 11 22 444
       Mobile: 0172 - 123 45 67</p>
    <p>info@meinefirma.de
       www.meinefirma.de</p>
  </article>
</main>

Und das passende Styling wäre

body { 
  font-family:Verdana, sans-serif; 
	margin: 0px;
	padding: 0px;
}

@media (min-width: 40em) {
  main {
    display: flex;
    max-width: 100vw;
  }
  aside { 
    flex: 0 1 66%;
  }
  article { 
    flex: 1 0 20em;
  }
}

aside
{
	background: url("bgimage2.jpg") center no-repeat;
	border: 1px solid black;
	height: 100vh;
  box-sizing: border-box;
}

article
{
  padding: 0.5em;
}
h1
{
	font-size: 1.5rem;
	color: #999999;
}
p
{
  white-space: pre-line;
	margin: 0 0 0.5em 0; 
	font-size: 1.5rem;
	line-height: 125%;
	color: #999999;
}

Die normale Anzeige erfolgt untereinander. Sobald der Viewport mindestens 42em breit ist, wird der Container (das main Element) zu einer Flexbox gemacht (display:flex). Flexbox ist nicht mehr ganz neu, aber jedenfalls deutlich neuer als float, und es extra dafür gemacht, Dinge nebeneinander zu stellen.

Wie sich die Kinder der Flexbox verhalten, wird durch die flex Eigenschaft festgelegt. Es gibt 3 Werte: Streckverhalten (0=nein, 1=ja), Schrumpfverhalten (0=nein, 1=ja) und Basisbreite. Ok, die Aussage "1=ja" ist eine Lüge für Kinder, man kann auch andere Zahlen angeben. Schau Dir das in unserem Wiki an.

Für Dich habe ich dem aside ein flex: 0 1 66%; gegeben. Heißt: Wächst nicht, kann aber bedarfsweise schrumpfen und hat eine Ausgangsbreite von 66%. Der Impressum-Artikel hat flex: 1 0 20em;, kann also wachsen, aber nicht schrumpfen, und ist dadurch mindestens 20em breit. Ist der Bildschirm breit genug (mindestens 60em), kann das Impressum also breiter werden. Ist er schmaler als 60em, bleiben es 20em und das Bild schrumpft.

Unterhalb von 40em (doppelte Impressumbreite, kannst Du natürlich anders wählen) verschwindet die Flexerei und alles steht untereinander.

Deine <br>achiale Art des Zeilenum<br>uchs habe ich durch <p> Elemente ersetzt. Mit white-space: pre-line wird erreicht, dass die Spaces aus dem Markup nicht erscheinen, aber sehr wohl die Zeilenumbrüche. Und natürlich braucht dein Impressum auch eine Überschrift (aber ist auf deiner Seite vielleicht eh schon da, nur anderswo).

Passe es für Dich an, viel Spaß damit. Sicherlich wird es noch Kommentare zu diesem Vorschlag geben, guck Dir dann an was davon für Dich passt.

Rolf

--
sumpsi - posui - clusi