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.

600px

@query-s

840px

@query-m

960px

@query-l

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 {
		...
	}
}

dev