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

Santa Claus resize (11)

Podobne wpisy...

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close