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" />
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%
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;
}
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
