Funkcje matematyczne

Funkcje matematyczne w CSS to narzędzia pozwalające na wykonywanie obliczeń w arkuszach stylów i ustawianie wartości CSS zależnych od innych wartości na stronie. Dostępne funkcje matematyczne w CSS to calc(), max() i min().

calc() pozwala na wykonanie prostych obliczeń w CSS, co umożliwia wygodne dostosowanie rozmiarów elementów na stronie.

 								
div {
  width: calc(50% - 20px);
  height: calc(15vh - 100px);
  padding: calc(5% + 10px);
  background-color: darkgray;
}

max() zwraca największą wartość spośród podanych argumentów.

								
div {
  width: max(50%, 180px);
  font-size: max(1em, 16px);
  background-color: lightgreen;
}

min() zwraca najmniejszą wartość spośród podanych argumentów.

								
div {
  width: min(50%, 300px);
  font-size: min(1em, 16px);
  background-color: lightpink;
}

Notatka

Funkcje te pozwalają na elastyczne ustawianie wielkości i pozycji elementów na stronie, co jest bardzo przydatne podczas projektowania responsywnych stron internetowych.