Budowa układu strony responsywnej siatka media responsywne css3

szkolenia bezpłatne kursy
lekcje, porady, artykuły znajdziesz w bocznym menu
 
 

Responsywne mobilne strony internetowe kurs bezpłatny

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

Budowa responsywnych i mobilnych stron internetowych

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

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%;
}

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

 

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

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>