Beispiel:Hero-1-srcset.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> 

 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" >
   <title>Resolution Switching mit srcset</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: 0px 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: .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;
     }
     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;
     }
     nav {
       flex: 1 auto;
       order: 3;
     }
     aside {
     /* durch auto werden die beiden asides in eine Zeile gesetzt */
       flex: 1 auto;
       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;
     }
     nav {
       flex: 1 1 0;
     }
     aside {
       flex: 1 1 0;
       order: 4;
       align-self: center;
       height: 200px;
     }
     }

article img {
  width: 100%;
}

   </style>

</head> <body>

Resolution Switching mit srcset

 <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>

Monument Valley

<img src="//wiki.selfhtml.org/images/1/11/Monumentvalley-1920.jpg" alt="Panorama Monument Valley - Quelle Wikipedia" srcset="https://wiki.selfhtml.org/images/8/85/Monumentvalley-600.jpg 600w, https://wiki.selfhtml.org/images/0/0d/Monumentvalley-1200.jpg 1200w, https://wiki.selfhtml.org/images/1/11/Monumentvalley-1920.jpg 1920w, https://wiki.selfhtml.org/images/6/62/Monumentvalley-3840.jpg 3840w" sizes="(min-width: 50em) 75vw, (min-width: 35em) 100vw, 100vw"> Das Monument Valley liegt in der Four-Corners-Region, an der Grenze zwischen Arizona und Utah, und ist bekannt für seine Tafelberge. 

 </article>
 
 <footer>

© 2016 by SELFHTML

 </footer>

</body> </html>

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