Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

Budowa układu strony responsywnej siatka media responsywne css3

flag language

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 ukladu strony responsywnej

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="//poswojsku.info/android.css" media="only screen and (max-width: 640px)" />
        <link rel="stylesheet" type="text/css" href="//poswojsku.info/styles.css" media="screen and (min-width: 641px)" />

 

Zobacz w menu podobne artykuły do: Budowa układu strony responsywnej siatka media responsywne css3

Polski

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym