Typy mediów

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-mediaqueries.html
Autor:
Radosław Kowaluk

Podtytuł

Czynności wstępne

Utwórz plik mediaqueries.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Typy mediów</title>
  <meta charset="utf-8">
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Reguła specjalna @media1 atrybut wszystkie media2

W elemencie style dodaj kod:

@media  all {
 body {
font: 21px Arial;
 }
 h1 {
font: 34px Arial;
 }
}

W elemencie body dodaj kod.

<h1>Typy mediów</h1>
<p>Reguły warunkowe formatowania</p>

Zapisz zmiany i odśwież podgląd, sprawdź podgląd wydruku.

Atrybut media z ekranem3 atrybut media drukowane4

W elemencie style dodaj kod:

@media screen {
 body {
 color: gray;
 }
}
@media print {
 body {
 color: black;
 }
}

Zapisz zmiany i odśwież podgląd, sprawdź podgląd wydruku.

  1. Reguła specjalna @media - określa reguły CSS dla danego typu mediów oraz w wersji CSS3 reguły warunkowe. Atrybuty (media) odzielamy przecinkami.
    Uwaga:
    Typy mediów moą wystąpić w regule specjalnej @import (np. @import url("styl.css") all;) i w elementach link, source; w atrybucie media (np. <link media="print" rel="stylesheet" href="print.css"/>)
  2. Atrybut all - okresla wszystkie urządzenia (wartość domyślna).
  3. Atrybut screen - okresla urządzenia z ekranem.
  4. Atrybut print - okresla urządzenia drukujące.

RWD (ang. Responsive Web Design)

strona klasyczna

W elemencie style dodaj kod:

body {
max-width: 987px;
margin: auto;
}
nav, main, aside {
background: silver;
margin: 1%;
padding: 1%;
float: left;
text-align: center;
}
main {
width: 46%;
}
nav, aside {
width: 21%;
}
footer {
clear: both;
}

W elemencie body dodaj kod.

<header>
<h1>Typy mediów</h1>
</header>
<nav>Menu</nav>
<main>
<p>Reguły warunkowe formatowania</p>
</main>
<aside>Zakładka</aside>
<footer>Stopka</footer>

Zapisz zmiany i odśwież podgląd, sprawdź skalowanie strony.

Srona responsywna, atrybut maksymalna szerokość1

W elemencie style dodaj kod:

@media (max-width: 640px) {
 body {
 max-width: 90%;
 font: 13px Arial;
 }
 nav, main, aside {
 float: none;
 width: auto;
 }
 h1 {
 font: 21px Arial;
 }
}

Zapisz zmiany i odśwież podgląd, sprawdź skalowanie strony.

Wgrywanie plików na serwer

Umieść plik mediaqueries.html na serwerze po sprawdzeniu poprawności.

Zadanie

Zastosuj poznane wiadomości w swojej witrynie.

  1. Atrybut max-width - określa maksymalną szerokość.