<!doctype html>
<html lang="pl-pl">
<head>
<meta charset="UTF-8">
<title>Responsywna strona internetowa</title>
<style>
   .wrapper {
      margin: 0 auto;
      width: 840px;
   }

   @media only screen and (max-width: 1024px) { }

   @media only screen and (min-width: 768px) and (max-width: 991px) {
      .wrapper {
         width: 696px;
      }
   }

   @media only screen and (max-width: 767px) {
      .wrapper {
         width: 264px;
      }
   }

   @media only screen and (min-width: 480px) and (max-width: 767px) {
      .wrapper {
         width: 408px;
      }
   }
</style>
</head>
<body>
   <div class="wrapper">
      <h1>Responsywna strona internetowa</h1>
      <p>Technika projektowania stron internetowych, tak aby ich wygląd
         i układ dostosowywał się automatycznie do rozmiaru okna urządzenia,
         na którym jest wyświetlana np. dużym ekrnie komputera,
         smartfonie czy tablecie.</p>
   </div>
</body>
</html>