Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
Budowa układu strony responsywnej siatka media responsywne css3
Budowa układu strony responsywnej siatka media responsywne css3
Filozofia budowy strony internetowej w technologii HTML5 + CSS - polega na zbudowaniu struktury strony w dokumencie html, a następnie na sformatowaniu sposobu wyświetlania poszczególnych elementów w pliku stylów CSS, pamiętając o trzech wyżej wymienionych zasadach:
1. elastycznych siatkach jako bazie układu,
2. elastycznych kodach dla wyświetlania mediów – dla: obrazów, filmów, a nawet osadzonych reklamach,
3. zapytaniach o media CSS do dostarczania różnych arkuszy stylów dla ekranów o różnych szerokościach.
Budowa układu strony responsywnej siatka media responsywne css3
ELASTYCZNE SIATKI JAKO BAZA UKŁADU STRONY INTERNETOWEJ
Przeanalizuj poniższe kody CSS – to one powodują, że siatka, czyli cała strona www są responsywne – proporcjonalnie zmniejszają się wraz ze zmniejszaniem ekranu na którym są wyświetlane.
nav ul, header h1, footer p, .klasa-zawartosc {
max-width: 1200px;
margin: 0 auto;
}
header {
padding: 2.3em 0 1em 0;
width: 85%;
margin: auto;
border-radius: 30% 30% 15% 15%;
background: #111E50;
}
.kontener-glowny {
float: left;
width: 100%;
border-left: groove 1px #012359;
}
.main {
float: left;
width: 70%;
padding: 0 20px;
border-right: groove 1px #012359;
}
.kolumna2 {
float: right;
width: 30%;
padding: 0 10px 0 20px;
border-right: groove 1px #012359;
font-size: 1.05em;
}
Dodatkowe przykłady elastycznych wymiarów:
ul li {
font-size: 80%;
}
Budowa układu strony responsywnej siatka media responsywne css3:
ELASTYCZNE KODY DLA WYŚWIETLANIA MEDIÓW – DLA: OBRAZÓW, FILMÓW, A NAWET OSADZONYCH REKLAM
Przeanalizuj poniższe kody CSS – to one powodują, że media – tutaj obrazy, wyświetlane są elastycznie - proporcjonalnie zmniejszają się wraz ze zmniejszaniem ekranu, na którym są wyświetlane.
img {
max-width: 100%;
border-radius: 5%;
padding: 2%;
}
ZAPYTANIA O MEDIA CSS DO DOSTARCZANIA RÓŻNYCH ARKUSZY STYLÓW DLA EKRANÓW O RÓŻNYCH SZEROKOŚCIACH
Przeanalizuj poniższe kody CSS – to one powodują, że wielkość strony wyświetla się w odpowiedni sposób na danym ekranie o danej wielkości.
Ekran na którym wyświetlana jest strona ma maksymalnie 640 pikseli, to strona wyświetla się z kodami css zawartymi w pliku mobile.css a gdy ekran ma wielkość co najmniej 641 pikseli to pobierane są style z pliku styles.css.
<meta name="viewport" content="initial-scale=10">
<link rel="stylesheet" type="text/css" href="//www.poswojsku.info/android.css" media="only screen and (max-width: 640px)" />
<link rel="stylesheet" type="text/css" href="//www.poswojsku.info/styles.css" media="screen and (min-width: 641px)" />