Beispiel:Hero-2-srcset.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Resolution Switching - 2</title>

 <style>
   body {
     display: flex;
     flex-flow: row wrap;
     gap: 1em;
   }

   /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
   h1,
   nav,
   nav a,
   article,
   section,
   aside,
   footer {
     border-radius: 0 0.5em 0.5em;
     border: thin solid;
     padding: 1em;
     flex: 1 100%;
   }

   nav,
   nav ul,
   nav li {
     margin: 0;
     padding: 0;
     border: none;
   }

   nav ul {
     display: flex;
     flex-direction: column;
   }

   nav li {
     list-style-type: none;
     margin: 0.3em 0;
     flex: 1 1 100%;
   }

   nav a {
     display: inline-block;
     width: 85%;
     background: #fffbf0;
     border: thin solid #dfac20;
     margin: 0;
     text-decoration: none;
     text-align: center;
   }

   nav a:hover {
     background-color: #dfac20;
   }

   section {
     background: #F1F3F4;
     border-color: slateblue;
   }

   article {
     background: #ffede0;
     border-color: #df6c20;
   }

   article img {
     width: 100%;
   }

   aside {
     background: #ebf5d7;
     border-color: #8db243;
   }

   h1,
   footer {
     background: #e4ebf2;
     border-color: #8a9da8;
     display: flex;
     flex-flow: row wrap;
   }

   footer * {
     flex: 1 1 0;
     justify-content: space-between;
   }

   footer p {
     text-align: right;
   }

   /* Smart Phones und Tablets mit mittlerer Auflösung */
   @media all and (min-width: 35em) {
     article {
       order: 2;
     }

     article img {
       width: 49%;
     }

     nav {
       flex: 1 auto 0%;
       order: 3;
     }

     aside {
       /* durch auto werden die beiden asides in eine Zeile gesetzt */
       flex: 1 auto 0%;
       order: 4;
     }

     footer {
       order: 5;
     }
   }

   /* Large screens */
   @media all and (min-width: 50em) {
     article {
       /* Der Article wird 3x so breit wie die beiden asides! */
       order: 3;
       flex: 4 1 0%;
     }

     article img {
       width: 32.5%;
     }

     nav {
       flex: 1 1 0%;
     }

     aside {
       flex: 1 1 0%;
       order: 4;
       align-self: center;
       height: 200px;
     }
   }
 </style>

</head>

<body>

Resolution Switching mit  srcset  - 2

 <nav>
  • <a href="#link_1.html">Startseite</a>
  • <a href="#link_2.html">Verlauf</a>
  • <a href="#link_3.html">Geschichte</a>
  • <a href="#link_4.html">Impressum</a>
 </nav>

 <article>

Antelope Canyon

<img src="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg" alt="Lower Antelope Canyon - Quelle Wikipedia" srcset="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg 750w, https://wiki.selfhtml.org/images/e/e5/Antelope-1-mittel.jpg 1200w, https://wiki.selfhtml.org/images/c/c4/Antelope-1-gross.jpg 1920w" sizes="(min-width: 50em) 33vw, (min-width: 35em) 50vw, 100vw" > <img src="https://wiki.selfhtml.org/images/0/02/Antelope-2-klein.jpg" alt="Lower Antelope Canyon - Quelle Wikipedia" srcset="https://wiki.selfhtml.org/images/0/02/Antelope-2-klein.jpg 750w, https://wiki.selfhtml.org/images/4/42/Antelope-2-mittel.jpg 1200w, https://wiki.selfhtml.org/images/7/79/Antelope-2-gross.jpg 1920w" sizes="(min-width: 50em) 33vw, (min-width: 35em) 50vw, 100vw" > <img src="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg" alt="Lower Antelope Canyon - Quelle Wikipedia" srcset="https://wiki.selfhtml.org/images/c/c4/Antelope-1-klein.jpg 750w, https://wiki.selfhtml.org/images/e/e5/Antelope-1-mittel.jpg 1200w, https://wiki.selfhtml.org/images/c/c4/Antelope-1-gross.jpg 1920w" sizes="(min-width: 50em) 33vw, (min-width: 35em) 50vw, 100vw" >

Der Antelope Canyon ist der meistbesuchte Slot Canyon im Südwesten der Vereinigten Staaten. Er besteht aus dem Upper Antelope Canyon und dem Lower Antelope Canyon und befindet sich in der Nähe von Page in Arizona. Er wurde vom Antelope Creek gebildet, einem etwa 30 km langen und nur selten nach Sturzregen im Ursprungsgebiet wasserführenden Bach.

 </article>

 <footer>

© 2016 by SELFHTML

 </footer>

</body> </html>

Abgerufen am 21.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Hero-2-srcset.html"