CSS - media

Wstawianie mediów na stronie

1. zewnętrzny arkusz stylów

<html lang="pl">
<head>
<title>Arkusz z medium docelowym</title>
<link rel="stylesheet" media="print, screen" href="arkuszstylow.css">
 </head>
<body>
<p>Ciało dokumentu...</p>
</body>
</html>

w pliku arkuszstylow.css umieszczamy przykładowy kod:

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 12pt }
}
@media print, screen {
    body { color: brown }
}

2. wewnętrzny arkusz stylów

<html lang="pl">
<head>
<title>Arkusz z medium docelowym</title>
<style type="text/css">
@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 12pt }
}
@media print, screen {
    body { color: brown }
}
</style>
 </head>
<body>
<p>Ciało dokumentu...</p>
</body>
</html>

Typ mediów (media types)

typ opis
all wszystkie urządzenia
handheld urządzenia ręczne o małych ekranach
print wydruki oraz podgląd wydruku
projection projektory
screen ekran komputera
tv telewizory

Cechy mediów (media feature)

cecha przykład
aspect-ratio
(proporcje obrazu)



 medium and (aspect-ratio: proporcje)
medium and (aspect-ratio: 4/3)
medium and (aspect-ratio: 16/9)
medium and (min-aspect-ratio: proporcje)
medium and (max-aspect-ratio: proporcje)
height
(wysokość)

 medium and (height: wysokość)
medium and (min-height: wysokość)
medium and (max-height: wysokość)
device-height
(wysokość urządzenia)

 medium and (device-height: wysokość)
medium and (min-device-height: wysokość)
medium and (max-device-height: wysokość)
orientation
(orientacja)

 medium and (orientation: orientacja)
medium and (orientation: landscape)     // orientacja pozioma
medium and (orientation: portrait)         // orientacja pionowa
resolution
(rozdzielczość)




 medium and (resolution: rozdzielczość)
medium and (resolution: 72dpi)
medium and (resolution: 150dpi)
medium and (resolution: 300dpi)
medium and (min-resolution: rozdzielczość)
medium and (max-resolution: rozdzielczość)
width
(szerokość)










 medium and (width: szerokość)
medium and (width: 320px)
medium and (width: 480px)
medium and (width: 600px)
medium and (width: 720px)
medium and (width: 960px)
medium and (width: 1200px)
medium and (width: 1560px)
medium and (width: 1920px)
medium and (width: 2520px)
medium and (min-width: szerokość minimalna)
medium and (max-width: szerokość maksymalna)
device-width
(szerokość urządzenia)

 medium and (device-width: szerokość)
medium and (min-device-width: szerokość)
medium and (max-device-width: szerokość)

Zapytania mediów (media queries)

Zapytania mediów (ang. media queries) umożliwiają dostosowanie arkusz CSS do rodzajów mediów oraz możliwości urządzenia.

@media (cecha-mediów) {}

@media (cecha-mediów) and (cecha-mediów){}

@media typ-mediów and (cecha-mediów) {}

@media typ-mediów and (cecha-mediów) and (cecha-mediów) {}

@media typ-mediów and (cecha-mediów), typ-mediów and (cecha-mediów) {}

@media typ-mediów, typ-mediów and (cecha-mediów) {}

@media typ-mediów, typ-mediów and (cecha-mediów) and (cecha-mediów) {}
wszystkie przypadki poza wskazanym:

@media not (cecha-mediów) {}

@media not typ-mediów and (cecha-mediów) {}

przykład 1
@media (min-width: 720px){
    p { background-color: black; color: yellow }
}

przykład 2
@media (max-width: 720px){
    p { background-color: black; color: yellow }
}

przykład 3
@media (min-width: 320px){
    p { background-color: black; color: yellow }
}
@media (min-width: 480px){
    p { background-color: black; color: orange }
}
@media (min-width: 600px){
    p { background-color: black; color: red }
}
@media (min-width: 720px){
    p { background-color: Navy; color: yellow }
}
@media (min-width: 960px){
    p { background-color: Navy; color: orange }
}
@media (min-width: 1200px){
    p { background-color: Navy; color: red }
}
@media (min-width: 1560px){
    p { background-color: DarkGreen; color: yellow }
}
@media (min-width: 1920px){
    p { background-color: DarkGreen; color: orange }
}
@media (min-width: 2520px){
    p { background-color: DarkGreen; color: red }
}

przykład 4
@media (max-width: 320px){
    p { background-color: black; color: yellow }
}
@media (max-width: 480px){
    p { background-color: black; color: orange }
}
@media (max-width: 600px){
    p { background-color: black; color: red }
}
@media (max-width: 720px){
    p { background-color: Navy; color: yellow }
}
@media (max-width: 960px){
    p { background-color: Navy; color: orange }
}
@media (max-width: 1200px){
    p { background-color: Navy; color: red }
}
@media (max-width: 1560px){
    p { background-color: Green; color: yellow }
}
@media (max-width: 1920px){
    p { background-color: Green; color: orange }
}
@media (max-width: 2520px){
    p { background-color: Green; color: red }
}

przykład 5
@media (min-width: 320px){
    p { background-color: black; color: yellow }
}
@media (min-width: 480px){
    p { background-color: black; color: orange }
}
@media (min-width: 600px){
    p { background-color: black; color: red }
}
@media (min-width: 720px){
    p { background-color: Navy; color: yellow }
}
@media (min-width: 960px){
    p { background-color: Navy; color: orange }
}
@media (min-width: 1200px){
    p { background-color: Navy; color: red }
}
@media (min-width: 1560px){
    p { background-color: DarkGreen; color: yellow }
}
@media (min-width: 1920px){
    p { background-color: DarkGreen; color: orange }
}
@media (min-width: 2520px){
    p { background-color: DarkGreen; color: red }
}

@media print and {
    p { color: red }
}

przykład 6
@media screen and (min-width: 1px) and (max-width: 320px){
    p { background-color: black; color: yellow }
}
@media screen and (min-width: 321px) and (max-width: 480px){
    p { background-color: black; color: orange }
}
@media screen and (min-width: 481px) and (max-width: 600px){
    p { background-color: black; color: red }
}
@media screen and (min-width: 601px) and (max-width: 720px){
    p { background-color: Navy; color: yellow }
}
@media screen and (min-width: 721px) and (max-width: 960px){
    p { background-color: Navy; color: orange }
}
@media screen and (min-width: 961px) and (max-width: 1200px){
    p { background-color: Navy; color: red }
}
@media screen and (min-width: 1201px) and (max-width: 1560px){
    p { background-color: DarkGreen; color: yellow }
}
@media screen and (min-width: 1561px) and (max-width: 1920px){
    p { background-color: DarkGreen; color: orange }
}
@media screen and (min-width: 1921px) and (max-width: 2520px){
    p { background-color: DarkGreen; color: red }
}

@media print {
    p { color: red }
}