Zapytania medialne

1. Wyłączanie mechanizmu automatycznego skalowania strony

Coraz więcej przeglądarek (np. iOS, Android, Opera Mobile) rozpoznają specjalne elementy meta viewport, które nadpisują mechanizm automatycznego dopasowania strony do ekranu. Wystarczy dodać znacznik w elemencie head dokumentu HTML i zdefiniować w nim określoną szerokość, np. w pikselach lub skali, np. 2.0:

<meta name="viewport" content="initial-scale=2.0,width=device-width" />

2. Rozmiar Stron WWW i RWD

Kod w pliku resize.css:

        body {
            background-color: blue;
        }
      @media screen and (max-width: 960px) {
        body {
            background-color: green;
        } 
      }
      @media screen and (max-width: 768px) {
         body {
            background-color: orange;
         }
      }
      @media screen and (max-width: 640px) {
         body {
            background-color: yellow;
         } 
      }
      @media screen and (max-width: 320px) {
         body {
            background-color: red;
         } 
      }

3. Równanie Ethan’a Marcotte’a:

element docelowy : kontekst = wynik * 100

gdzie:

  • kontekst – najbardziej zewnętrzny div strony (#wrapper)
  • element docelowy – obliczany element (#slider)
  • wynik – wartość wprowadzona do arkusza css (%)

przykład:

  • #wrapper – 960px
  • #slider – 930px
  • #slider wynik – 96,875%

4. Responsywne menu

Plik index.html w <head>:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Uzupełnij index.html po <body>:

<nav> 
   <a href="#" class="menu-icon"><i class="fa fa-bars"></i></a>
   <ul class="menu">
      <li><a href="#">Prezenty</a></li>
      <li><a href="#">Przepisy</a></li>
      <li><a href="#">O Mikołaju</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

Plik index.html przed <body>:

<script>
var button = document.getElementsByClassName("menu-icon")[0];

button.onclick = function() {
    document.getElementsByClassName("menu")[0].classList.toggle("show");

    return false;
}
</script>

Plik style.css:

nav .menu-icon {
display: none;
    margin: 15px 0 0;
font-size:2.5em;
}

Plik resize.css:

  nav ul {
       display: none;
  } 
  nav ul.show {
       display: block;
  }
  nav .menu-icon {
       color: white;
       text-decoration: none;
  }
  nav .menu-icon:hover {
       color: #c1c1c1;
  }
  nav .menu-icon {
      display: inline-block;
  }
  nav ul li {
      display: block;
      float: none;
      padding:0px;
      margin:0;
  }
  nav ul li a {
      padding:5px 20px 5px 5px;
    }