Opanowanie responsywnego projektowania stron internetowych za pomocą funkcji matematycznych CSS

Matematyka jest dobra, matematyka jest świetna, ale czy chcesz spędzać czas na obliczeniach, gdy Twój arkusz stylów może to zrobić za Ciebie?

CSS zawiera trzy przydatne funkcje matematyczne, które zmienią sposób projektowania stron internetowych. Pokażemy Ci, jak i dlaczego powinieneś ich używać.

Wprowadzenie matematyki do CSS

CSS jest głównie deklaratywny, ale poprawki wprowadziły funkcje do języka. W specyfikacji jest teraz wiele funkcji, a trzy najprostsze matematyczne mogą okazać się bardzo przydatne: calc, max i min.

Możesz użyć ten prosty przykład CodePen aby pomóc śledzić wraz z przewodnikiem.

CSS calc() Funkcja matematyczna

Funkcja CSS calc() wykonuje proste obliczenia i używa wyniku jako wartości właściwości. Oznacza to, że możesz przypisać wartości dynamiczne do właściwości, takich jak wysokość i szerokość, wszystko bez CSS @pytania o media.

Ta funkcja obsługuje dodawanie (+), mnożenie (*), odejmowanie (-) i dzielenie (/) za pomocą jednego operatora.

Przykład: tworzenie równych odstępów na różnych rozmiarach ekranu

Sprawienie, by strona wyglądała tak samo w różnych rozmiarach może być trudna, nawet jeśli używasz dynamicznych jednostek CSS, takich jak vw i %. Funkcja CSS calc() zmienia to.

Jak widać na powyższym obrazku, pasek tytułu przechodzący przez ekran ma różne odstępy w zależności od rozmiaru ekranu. Dzieje się tak, ponieważ ustawiliśmy szerokość na 80vw, ustawiając odstępy na 20vw; zmienna wartość.

Jeśli zamiast tego użyjemy funkcji calc(), możemy ustawić takie same odstępy dla każdego rozmiaru ekranu. Właściwość, której używamy do tego wygląda tak:

szerokość: calc (100vw - 400px);

Ustawia to szerokość naszego paska tytułowego na 400px mniej niż szerokość strony, tworząc równe odstępy bez względu na rozmiar wyświetlacza.

CSS max() Funkcja matematyczna

Funkcja CSS max() wybiera najwyższą wartość z puli w celu dodania wartości do właściwości CSS. Możesz dodać dowolną liczbę potencjalnych wartości, oddzielając każdą przecinkiem, ale użyje tylko największej.

Przykład: Ograniczanie wysokości paska nawigacyjnego

Jednym z kluczowych wyzwań związanych z responsywnym projektowaniem stron internetowych jest orientacja. Witryna, która działa na dużym, portretowym monitorze komputera, musi również dobrze wyglądać na mniejszym, pionowym ekranie mobilnym.

Może to sprawić, że wartość nieruchomości będzie wyglądać świetnie na komputerze, a źle na urządzeniu mobilnym, tak jak pokazano na powyższym obrazku. Nasz pasek nawigacyjny ma ustawioną wysokość 10vh, ale to sprawia, że ​​pasek wygląda na cienki na urządzeniach stacjonarnych.

Aby rozwiązać ten problem, możemy użyć funkcji CSS max():

wysokość: max (10vh, 80px);

Dodając taką regułę, możemy ustawić minimalną wysokość 80px dla naszego paska nawigacyjnego, zachowując wartość 10vh, jeśli jest wyższa.

CSS min() Funkcja matematyczna

Funkcja min() jest podobna do funkcji max(), ale wybiera najniższą wartość z puli do użycia jako wartość właściwości.

Przykład: ustawianie maksymalnego rozmiaru tekstu

Niezależnie od tego, czy używasz wartości dynamicznej, czy nie, uzyskanie odpowiedniego rozmiaru tekstu na różnych platformach może być trudne. Możemy użyć funkcji CSS min(), aby ustawić dwie lub więcej potencjalnych wartości właściwości dla naszego głównego rozmiaru tekstu nagłówka i użyjemy najmniejszej.

Używać rozmiar czcionki: 10vh; Właściwość głównego tekstu nagłówka w naszym przykładzie sprawia, że ​​tekst wygląda świetnie na komputerze, ale jest zbyt duży na urządzeniach mobilnych.

Aby to zmienić, możesz użyć funkcji CSS min(), aby zapewnić alternatywne rozmiary:

rozmiar czcionki: min (10vh, 10vw);

Ten przykład działa, ponieważ wyświetlacze mobilne są wysokie i cienkie, podczas gdy monitory stacjonarne są szerokie i krótkie. Oznacza to, że jednostka szerokości widoku (vw) jest mniejsza na urządzeniach mobilnych niż na komputerach.

Korzystanie z matematyki do projektowania responsywnych stron internetowych

Funkcje matematyczne, które są fabrycznie wyposażone w CSS, oferują unikalny sposób łatwego tworzenia responsywnych stron internetowych. Aby rozpocząć, wystarczy odpowiednio je skonfigurować.

Oczywiście istnieją inne metody i funkcje CSS, których możesz użyć, aby stworzyć witrynę, która będzie wyglądać świetnie na różnych platformach.

Jak zbudować responsywny pasek nawigacyjny za pomocą HTML i CSS?

Czytaj dalej

O autorze