•  0
  •  111

Wygląd strony w zależności od skalowania

Czy zastanawiałeś się kiedyś w jaki sposób zapewnić stronie prawidłowy wygląd w zależności od wielkości okna przeglądarki?

Aby to zrobić należy wykorzystać właściwość @media-screen zaimplementowaną w CSS'sie. Ja przedstawię przykład w wykorzystaniem SASS oraz Frameworka Bootstrap 4, ponieważ są to narzędzia z którymi najczęściej pracuję.

Jeśli miałeś wcześniej doczynienia z Bootstrapem to zapewne znasz system "gridów". Jeśli nie to przypomnę tylko, że w BS4 wyróżniamy następujące punkty:

  • xs,
  • sm,
  • md,
  • lg,
  • xl.

Jeśli nie wiesz za wiele o funkcjonowaniu "gridów" w BS4, zachęcam do lektury dokumentacji.

Aby przypisać poszczególne style dla różnych punktów - można wykorzystać mixiny w/w "break pointów" np. w taki sposób:

		@include media-breakpoint-down(sm) {
			border-bottom: 2px solid transparentize($brand-danger,0.5);
			margin-bottom: 4px;
		}
		@include media-breakpoint-up(md) {
			border-right: 2px solid transparentize($brand-danger,0.5);
			padding-right: 4px;
			font-size: 3.5rem;
		}

Stosując mixin media-breakpoint-down(sm) z dowolnymi stylami umieszczonymi w klamrach { } - przypiszemy je do wybranego znacznika, kiedy rozmiar okna będzie mniejszy niż sm, przekazany w parametrze.

Analogicznie używając zapisu media-breakpoint-up(sm), możemy przypisać dowolne cechy dla okien większych niż sm. Oczywiście możemy używać dowolnych "break pointów" z powyższej listy.

Zachęcam do częstego stosowania tych mixinów, ponieważ w dobie wszechobecnego RWD, są to bardzo użyteczne narzędzia, a jak wiadomo - strona musi pięknie prezentować się na wszystkich urządzeniach.

Dodaj komentarz
Brak wyników.