Mobile Webseite erstellen aus vorhandener Desktop Webseite

[Auge]

Hallo

Also das Template sieht auf Mobile genauso aus wie Desktop, nur halt nicht wie eine Mobile Seite, bei welcher man das App Gefühl hat. Die Texte sind zu klein, zuviel Rand links und rechts und zuviel Infos, mobil brauch nur die Hälfte dargestellt werden.

Wo legt man zB fest das auf der Mobilen Seite nur einspaltig dargestellt werden soll, kein Hintergrundbild undkleinere Bilder dargestellt werden soll und das nur gewisse Infos angezeigt werden sollen, nicht alles?

Nichts für ungut und auch nicht ganz ohne Sarkasmus: Das steht bestimmt auf den von dir so geschmähten Seiten mit dem vielen Bla-Fasel-Text.

Grundsätzlich gilt: Mit Media Queries definierst du (typischerweise) Breitenbereiche, für die du dann die dort gelten sollenden Regeln notierst. Dabei hat sich als sinnvoll herausgestellt, zuerst die allgemeingültigen Regeln, wie z.B. Schrift- und Hintergrundfarben, sowie jene regeln für die schmalsten Viewports zu definieren. Danach folgen für aufsteigende Viewportbreiten die von den soeben notierten Standardregeln abweichenden Regeln.

html {
color: #000;
background: #fff;
font-size: 1.25em;  /* vergrößerte Schrift für unfähige Browser */
font-size: 1.25rem;  /* vergrößerte Schrift für fähige Browser */
margin: 0;
padding: 0;
}
body {
margin: 0.25em;
}
h1, h2, h3, h4, p, li, th, td {
margin: 0.5rem;
padding: 0;
}
@media (min-width: 32em) {
  html {
  font-size: 1em;  /* normale Schriftgröße nach Browservorgabe für unfähige Browser */
  font-size: 1rem;  /* normale Schriftgröße nach Browservorgabe für fähige Browser */
  }
  body {
  margin: 1em;
  }
  h1, h2, h3, h4, p, li, th, td {
  margin: 1em;
  margin: 1rem;
  }
}
@media (min-width: 50em) {
  body {
  margin: 1em auto;
  }
  h1, h2, h3, h4, p, li, th, td {
  margin: 1.5em;
  margin: 1.5rem;
  }
}

Das ist hier nur ein Beispiel für den grundsätzlichen Aufbau. Weder sind die angegebenen Grenzen noch die einzelnen Angaben ausgewogen gewählt. Es sollte aber klar werden, wohin die Reise geht. Notiere Regeln, die du im „Spezial“-Fall „breiterer Viewport“ bei Bedarf überschreibst.

Tschö, Auge