Responzivita

Obsah se snažte již od počátku vývoje přizpůsobovat nejrůznějším velikostem displejů nebo přímo zařízením.

Media Queries

Pět dostupných breakpointů zaručuje dostatečnou granularitu pro tvorbu responzivního layoutu.

S

600px

@query-s

M

840px

@query-m

L

960px

@query-l

XL

1280px

@query-xl

XXL

1800px

@query-xxl

Postupně měnte šířku okna

.foo {
    .themify(background-color, @yellow);

    @media @query-s   { .themify(background-color, @orange) }
    @media @query-m   { .themify(background-color, @red) }
    @media @query-l   { .themify(background-color, @pink) }
    @media @query-xl  { .themify(background-color, @purple) }
    @media @query-xxl { .themify(background-color, @blue) }
}

Mobile first Media queries skládejte vždy od nejmenšího rozlišení po největší.

Desktop first Do verze 15.04 byly media queries pricipovány opačným způsobem.

Zanoření v Less

Dotazy mohou být vnořeny do selektoru nebo samostatně na nejvyšší úrovni s vnořenými selektory.

.foo {
    @media @query-m {
        ...
    }
}

.bar {
    @media @query-m {
        ...
    }
}

@media @query-m {
    .foo {
        ...
    }

    .bar {
        ...
    }
}

Zařízení

MultiWeb dokáže detekovat použité zařízení. Standardní formuláře jsou stylovány právě díky této detekci, které přidává na HTML element příslušné třídy.

Phone

@{phone}

Tablet

@{tablet}

Desktop

@{desktop}

Not Phone

@{not-phone}

Not Tablet

@{not-tablet}

Not Desktop

@{not-desktop}

Poznámka Narozíl od media queries je zde využito tříd na <html> elementu, proto je proměnné používané jako selectory nutno escapovat složenými závorkami.

Princip zápisu je totožný s media queries, u vnořených selektorů zařízení však nezapomeňte přidat & pro korektní zřetězení.

.foo {
    @{phone} & {
        ...
    }
}

.bar {
    @{phone} & {
        ...
    }
}

@{phone}  {
    .foo {
        ...
    }

    .bar {
        ...
    }
}

design

Responzivita#