Latest web development tutorials

Responsive Web design - pytania mediów

Mediów (media) wprowadziły zapytanie o CSS3: CSS3 zapytaniami @media .

Użyj @media zapytań można określić różne style dla różnych typów nośników.

Przykłady

Jeśli okno przeglądarki jest mniejsza niż 500px, tło zmieni się na jasnoniebieskim:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

Spróbuj »

Dodaj punkt przerwania

W poprzednim tutorialu użyjemy wierszy i kolumn do tworzenia stron internetowych, jest czuły, lecz na małym ekranie i nie przyjazny show.

Zapytania o media mogą pomóc nam rozwiązać ten problem. Możemy dodać punkt przerwania w środku projektu wstępnego, różne wartości graniczne mają różne skutki.

Pulpit

urządzenia mobilne

Użyj zapytań o media 768px dodać punkty przerwania:

Przykłady

Gdy ekran (okno przeglądarki) jest mniejszy niż 768px szerokość każdej kolumny jest w 100%:

/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Spróbuj »

Pierwszeństwo dla terminala mobilnego projektu

Priorytet oznacza ruchome pulpity i innych urządzeń końcowych przeznaczonych do nadania priorytetu terminala mobilnego projektu.

Oznacza to, że musimy dokonać pewnych zmian w CSS.

My screen poniżej 768px zmiany stylu muszą zostać zmodyfikowane w tym samym stylu, gdy ekran jest szerszy niż 768px. Poniżej przedstawiono przykłady koniec priorytet mobilnej:

/ * Projekt końcowy dla telefonu komórkowego: * /
[Class = * "współpracownicy"] {
width: 100%;
}
@media tylko ekran i (min-width : 768px) {
/ * Na pulpicie: * /
.col-1 {width: 8,33% ;}
.col-2 {width: 16,66% ;}
.col-3 {width: 25% ;}
.col-4 {width: 33,33% ;}
.col-5 {width: 41,66% ;}
.col-6 {width: 50% ;}
.col-7 {width: 58,33% ;}
.col-8 {width: 66,66% ;}
.col-9 {width: 75% ;}
.col-10 {width: 83,33% ;}
.col-11 {width: 91,66% ;}
.col-12 {width: 100% ;}
}

Inne punkty przerwania

Możesz dodać breakpoint według swoich potrzeb.

Możemy również urządzenia typu tablet i telefon komórkowy ustawić punkty przerwania.

Pulpit

tabletka

urządzenia mobilne

600px ekran podczas dodawania zapytań o media i ustawić nowy styl (ale mniej niż ekran jest większy niż 600px 768px):

Przykłady

Należy zauważyć, że dwa style klasy są takie same, ale różne nazwy (współpracownicy i Col-m):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 { width: 8.33%; }
    .col-m-2 { width: 16.66%; }
    .col-m-3 { width: 25%; }
    .col-m-4 { width: 33.33%; }
    .col-m-5 { width: 41.66%; }
    .col-m-6 { width: 50%; }
    .col-m-7 { width: 58.33%; }
    .col-m-8 { width: 66.66%; }
    .col-m-9 { width: 75%; }
    .col-m-10 { width: 83.33%; }
    .col-m-11 { width: 91.66%; }
    .col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

Spróbuj »

Powyższy kod wygląda bardziej niż wiele, ale może on być ustawiany automatycznie w zależności od rozmiaru ekranu różnych stylach, więc wciąż jest bardzo potrzebne.

Przykłady HTML

Na pulpicie:

Pierwszy i trzeci odcinek łączący trzy. część pośrednia między domenami 6.

Na tabletach:

Pierwszy cross-domain 3, drugi odcinek łączący 9, trzecia część poprzeczki domenie 12:

<Div class = "wiersz">
<Div class = "COL-3 col-m-3"> ... </ div>
<Div class = "kol-6 kol-m-9"> ... </ div>
<Div class = "COL-3 col-m-12"> ... </ div>
</ Div>

Kierunek: poziomo / ekran pionowym ekranie

W połączeniu z zapytaniami mediów CSS, można utworzyć dostosować się do odmiennej orientacji urządzenia (krajobraz, portret portret, etc.) układu.

Składnia:

orientation:portrait | landscape
  • pionowa: określ urządzenie wyjściowe w widzialnym obszarze wysokość strony jest większa niż lub równa szerokości
  • Krajobraz: wartość wzajemnych okolicznościach portretowych są krajobrazu

Przykłady

Jeżeli pionowe tle ekran będzie niebieski:

@media tylko ekran i (orientacja: landscape ) {
body {
background-color: jasnoniebieski;
}
}

Spróbuj »