learn-what-you-see.com - CSS

CSS - Viewports

Bei Viewports handelt es sich um die sichtbaren Bereiche, die den "kompletten" Inhalt einer Website auf einem bestimmten Gerät (Monitor / Display etc.) anzeigen. Mit CSS lassen sich diverse Viewports definieren, die dem jeweils genutzten Ausgabegerät angepasst sind.

Sog. Breakpoints dienen dabei als Sprungmarke ... und werden durch media queries definiert.

Beispiel

@media only screen and (min-width: 100px) {

}

Listing: CSS media queries

Analyse

...

###

...

In der Praxis

Öffnen Sie die Datei index.html und main.css und passen Sie das Seitenlayout an!

...

<head>

... unverändert ...

</head>


<body>


<header>

<p>
<header>
</p>

</header>


<main>

<p>
<main>
</p>


<section>

<p>
<section>
</p>

</section>


<section>

<p>
<section>
</p>

</section>


</main>


<aside>

<p>
<aside>
</p>

</aside>


<footer>

<p>
<footer>
</p>

</footer>


</body>

Listing der Datei index.html

Die CSS Datei wird folgendermaßen angepasst:

body {
  /* Darstellung: Grid Container */
  display: grid;
  height: 100vh;

  /* Spalten - Zeilen ... */
    grid-template-columns: auto;
    grid-template-rows: auto;

  /* Aufteilung ... */
    grid-template-areas:
      "header-grid-area"
      "main-grid-area"
      "aside-grid-area"
      "footer-grid-area"
    ;

  /* Abstände zwischen den GRID Areas */
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
}
 
header, aside, main, footer {
  display: block;
  overflow: hidden;
 
  height: auto;
  width: 100%;

  /* border: 1px dashed pink; */
  padding: 0.4rem 0.6rem;
}
 
header, footer {
  background-color: #1c1c1c;
  }
 
header {
  grid-area: header-grid-area;
}

aside {
  grid-area: aside-grid-area;
  background-color: #e95420;
}
 
main {
  grid-area: main-grid-area;
  background-color: grey;
}
 
footer {
  grid-area: footer-grid-area;
}

header p,
footer p {
  font-weight: bold;
  color: #ffffff;

  padding: 2rem 1rem;
 
  text-align: center;
}
 
/* -------- */
/* ## ## ## */
/* ---------*/
section {
  display: block;
  background-color: #ffffff;

  overflow: hidden;
 
  height: auto;
  width: 84%;
 
  margin: 1.2rem auto;
    border: 1px dashed green;
    padding: 0.6rem;
}

Listing der Datei main.css

1. ...

2. ...

3. ...

4. ...

< Zurück Zum Seitenanfang springen Weiter >