YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Nachdem wir mit dem Grundgerüst gestartet haben, geht es hier um Media Queries und Brakepoints. Hierfür werden die Vorkentnisse des Grundgerüsts benötigt (siehe https://tutcube.de/2020/04/19/responsive-webdesign-grundgeruest-erstellen/).

Quellcode index.html

<!DOCTYPE html>
<html>
  <head>
    <title>TutCubeDE Responsive Website</title>
    <link rel="stylesheet" href="style.css" media="print" />

    <!--[if lt IE 9]>
    <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('footer');
    </script>
    <![endif]-->
  </head>
  <body>
    <div id="wrapper">
      <header>
        HEADER
      </header>
      <nav>
        SIDEBAR
      </nav>
      <div id="content">
        INHALT
      </div>
      <footer>
        FOOTER
      </footer>
    </div>
  </body>
</html>

Quellcode style.css

/* Block Darstellung für HTML5-Elemente im IE8 */
header,
nav,
footer {
  display: block;
}
/***********************************************/

body{
  background-color: #FE9A2E;
}

#wrapper{
  max-width: 960px;
  margin: 0px auto;
  background-color: #FFFFFF;
  margin-top: 20px;
  padding: 20px;
}
header{
  width: 100%;
  height: 100px;
  background-color: #DF7401;
  margin-bottom: 20px;
}
#content{
  width: 80%;
  height: 520px;
  background-color: #A4A4A4;
  float: right;
  margin-bottom: 20px;
}
nav{
  width: 17%;
  height: 520px;
  float: left;
  background-color: #FACC2E;
  margin-bottom: 20px;
}
footer{
  clear: both;
  width: 100%;
  height: 50px;
  background-color: #FA5858;
}

@media screen and (max-width: 500px) {
  nav{
    width: 100%
  }
  #content {
    width: 100%;
  }
  #wrapper{
    padding: 10px;
    margin-top: 0px;
  }
}

@media screen and (min-width: 800px){
   nav{
     background-color: green;
   }
}