{"id":52,"date":"2021-07-14T09:14:02","date_gmt":"2021-07-14T09:14:02","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=52"},"modified":"2026-02-20T07:28:27","modified_gmt":"2026-02-20T07:28:27","slug":"responsywny-layout-z-uzyciem-funkcji-min-max-oraz-clamp","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/responsywny-layout-z-uzyciem-funkcji-min-max-oraz-clamp\/","title":{"rendered":"Responsywny layout z u\u017cyciem funkcji min(), max() oraz clamp()"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

CSS Flexbox oraz Grid by\u0142y rewolucj\u0105 w budowaniu responsywnych layout\u00f3w, dzi\u0119ki ich w\u0142a\u015bciwo\u015bciom tworzenie nowoczesnych stron sta\u0142o si\u0119 przyjemne i szybkie, a ich wykorzystanie uznajemy jako \u015bwiatowy standard, kt\u00f3ry wyrzuci\u0142 z g\u0142\u00f3w developer\u00f3w w\u0142a\u015bciwo\u015b\u0107 float na zawsze. Kolejna, ma\u0142a rewolucja, u\u0142atwiaj\u0105ca prac\u0119 z elastycznymi uk\u0142adami nadejdzie w momencie pe\u0142nego wsparcia container queries<\/a>, ale nie tylko rewolucjami developer \u017cyje. Dzi\u015b chcia\u0142bym przybli\u017cy\u0107 Wam trzy funkcje CSS, kt\u00f3rych pojawienie si\u0119 przesz\u0142o, moim zdaniem, bez echa i kt\u00f3rych wykorzystanie spotykam do\u015b\u0107 rzadko. S\u0105 to funkcje min()<\/strong>, max()<\/strong> oraz clamp()<\/strong>, kt\u00f3re z powodzeniem mo\u017cemy wykorzystywa\u0107 podczas pracy nad responsywnymi layoutami.<\/p>\n\n\n\n

Wspomniane funkcje s\u0105 w pe\u0142ni wspierane we wszystkich najpopularniejszych przegl\u0105darkach, wi\u0119c nic nie stoi na przeszkodzie by korzysta\u0107 z ich dobrodziejstw. Mo\u017cemy kontrolowa\u0107 za ich pomoc\u0105 rozmiar element\u00f3w jak i odst\u0119py mi\u0119dzy nimi, a tak\u017ce u\u017cy\u0107 ich do stworzenia responsywnejj typografii. Znajd\u0105 zastosowanie we wszystkich w\u0142a\u015bciwo\u015bciach CSS, kt\u00f3rych warto\u015b\u0107 okre\u015blamy za pomoc\u0105 liczby lub wyra\u017cenia matematycznego, a dodatkowo nie wymagaj\u0105 u\u017cywania funkcji calc().<\/p>\n\n\n\n

Przyk\u0142ady wykorzystania<\/h2>\n\n\n\n

To tyle teorii, czas na mi\u0119so, czyli przyk\u0142ady u\u017cycia. Na pierwszy ogie\u0144 wykorzystajmy te funkcje do okre\u015blenia rozmiaru danego elementu, dzi\u0119ki temu w wielu przypadkach unikniemy stosowania media queries lub kilku linijek CSS. Przyjmijmy, \u017ce chcemy okre\u015bli\u0107 minimaln\u0105, procentow\u0105 szeroko\u015b\u0107 bloku, jednocze\u015bnie okre\u015blaj\u0105c jego maksymaln\u0105 szeroko\u015b\u0107. Bez wykorzystania funkcji min()<\/strong> musimy napisa\u0107 dwie linijki CSS:<\/p>\n\n\n

.element<\/span> {\n  width<\/span>: 50%<\/span>;\n  max-width<\/span>: 30rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
lub skorzysta\u0107 z wcze\u015bniej wspomnianego media quieries. Wykorzystuj\u0105c funkcj\u0119 min()<\/strong> uzyskamy taki sam efekt za pomoc\u0105 jednej linijki kodu:<\/p>\n\n\n
.element<\/span> {\n  width<\/span>: min<\/span>(50%<\/span>, 30rem<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
W tym przypadku przegl\u0105darka por\u00f3wnuje warto\u015b\u0107 50% szeroko\u015bci okna do warto\u015bci 30rem. Je\u015bli 50% szeroko\u015bci okna jest mniejsze ni\u017c 30rem to element przyjmuje szeroko\u015b\u0107 50%, je\u015bli za\u015b jest wi\u0119ksze to wtedy element otrzymuje maksymaln\u0105 szeroko\u015b\u0107 o warto\u015bci 30rem.<\/p>\n\n\n\n
Funkcja max()<\/strong> dzia\u0142a odwrotnie, przyjmijmy, \u017ce chcemy aby element mia\u0142 50% szeroko\u015bci, ale nie mniej ni\u017c 30rem. W takim przypadku style dla tego elementu powinny wygl\u0105da\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n
.element<\/span> {\n  width<\/span>: max<\/span>(50%<\/span>, 30rem<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Co gdy chcemy okre\u015bli\u0107 zar\u00f3wno minimaln\u0105 jak i maksymaln\u0105 szeroko\u015b\u0107 elementu w zale\u017cno\u015bci od szeroko\u015bci okna przegl\u0105darki? Wtedy z pomoc\u0105 przychodzi ostatnia z funkcji – clamp()<\/strong>. Bez jej wykorzystania (oraz bez wykorzystania media queries) style dla tego elementu wygl\u0105da\u0142yby nast\u0119puj\u0105co:<\/p>\n\n\n
.element<\/span> {\n  width<\/span>: 50%<\/span>;\n  min-width<\/span>: 30rem<\/span>;\n  max-width<\/span>: 50rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Dzi\u0119ki funkcji clamp()<\/strong> mo\u017cemy ograniczy\u0107 te style do jednej linijki:<\/p>\n\n\n
.element<\/span> {\n  width<\/span>: clamp<\/span>(30rem<\/span>, 50%<\/span>, 50rem<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Jak wida\u0107 na powy\u017cszym przyk\u0142adzie – jako pierwszy argument podajemy warto\u015b\u0107 minimaln\u0105, jako drugi optymaln\u0105 i preferowan\u0105 warto\u015b\u0107, a jako trzeci warto\u015b\u0107 maksymaln\u0105.<\/p>\n\n\n\n
Gdzie jeszcze mo\u017cemy wykorzysta\u0107 te funkcje?<\/h3>\n\n\n\n
Jak wiadomo, ograniczenia istniej\u0105 tylko w naszych g\u0142owach, ale by je pokona\u0107 i uruchomi\u0107 kreatywno\u015b\u0107 zaprezentuje Wam dodatkowe dwa przyk\u0142ady u\u017cycia tych funkcji.<\/p>\n\n\n\n
Pierwszy z nich to, wspomniana wcze\u015bniej, \u201eFluid typography\u201d czyli ustawienie rozmiaru tekstu w zale\u017cno\u015bci od szeroko\u015bci okna. U\u017cycie funkcji clamp()<\/strong> pozwala w prosty spos\u00f3b okre\u015bli\u0107 minimalny, oczekiwany oraz maksymalny rozmiar np. nag\u0142\u00f3wk\u00f3w:<\/p>\n\n\n
h2<\/span> {\n  font-size<\/span>: clamp<\/span>(2.5rem<\/span>, 6vw<\/span>, 4.2rem<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
W powy\u017cszym przyk\u0142adzie domy\u015blny rozmiar nag\u0142\u00f3wka drugiego stopnia to 6vw, jednak nie b\u0119dzie on mniejszy ni\u017c 2.5rem i nie wi\u0119kszy ni\u017c 4.2rem.<\/p>\n\n\n\n
Drugi przyk\u0142ad pokazuje prosty spos\u00f3b na stworzenie wrappera (kontenera) na np. tre\u015b\u0107. Wykorzystamy do tego celu funkcje max()<\/strong>:<\/p>\n\n\n
:root<\/span> {\n  --wrapperWidth<\/span>: 100rem<\/span>;\n  --paddingWidth<\/span>: 1.5rem<\/span>;\n}\n\n.wrapper<\/span> {\n  padding-left<\/span>: max<\/span>(var(--paddingWidth), 50vw<\/span> - var<\/span>(--wrapperWidth) \/ 2<\/span>);\n  padding-right<\/span>: max<\/span>(var(--paddingWidth), 50vw<\/span> - var<\/span>(--wrapperWidth) \/ 2<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
W powy\u017cszym przyk\u0142adzie zawarto\u015b\u0107 sekcji z klas\u0105 wrapper b\u0119dzie mia\u0142a maksymaln\u0105 szeroko\u015b\u0107 na poziomie 100rem, na mniejszych rozdzielczo\u015bciach za\u015b przyjmie warto\u015b\u0107 na poziomie 100% ekranu odejmuj\u0105c paddingi boczne na poziomie 1.5rem. Zmienne CSS widoczne na pocz\u0105tku przyk\u0142adu okre\u015blaj\u0105 maksymaln\u0105 szeroko\u015b\u0107 wrappera oraz minimalny padding boczny. Dla du\u017cych rozdzielczo\u015bci padding boczny elementu b\u0119dzie automatycznie wzrasta\u0142 w taki spos\u00f3b, by zawarto\u015b\u0107 elementu z klas\u0105 wrapper nie przekroczy\u0142a szeroko\u015bci 100rem.<\/p>\n\n\n\n
Czas na wykorzystanie w praktyce<\/h2>\n\n\n\n
Je\u015bli nie robili\u015bcie tego dotychczas, to nadszed\u0142 czas by zacz\u0105\u0107 korzysta\u0107 z wspomnianych funkcji w swoich projektach. Nie jest to na pewno „game changer”, kt\u00f3ry spowoduje ca\u0142kowit\u0105 zmian\u0119 podej\u015bcia do budowania responsywnych layout\u00f3w – tak jak mia\u0142o to miejsce w przypadku pojawienia si\u0119 w\u0142a\u015bciwo\u015bci flex czy grid. Korzystanie z tych funkcji nie pozwoli r\u00f3wnie\u017c na ca\u0142kowite zrezygnowanie z media queries, jednak w wielu przypadkach zredukuje ilo\u015b\u0107 kodu, przy\u015bpieszy i u\u0142atwi wdra\u017canie nowych projekt\u00f3w.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
CSS Flexbox oraz Grid by\u0142y rewolucj\u0105 w budowaniu responsywnych layout\u00f3w, dzi\u0119ki ich w\u0142a\u015bciwo\u015bciom tworzenie nowoczesnych stron sta\u0142o si\u0119 przyjemne i szybkie, a ich wykorzystanie uznajemy jako \u015bwiatowy standard, kt\u00f3ry wyrzuci\u0142 z g\u0142\u00f3w developer\u00f3w w\u0142a\u015bciwo\u015b\u0107 float na zawsze. Kolejna, ma\u0142a rewolucja, u\u0142atwiaj\u0105ca prac\u0119 z elastycznymi uk\u0142adami nadejdzie w momencie pe\u0142nego wsparcia container queries, ale nie tylko […]<\/p>\n","protected":false},"author":7,"featured_media":59,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4],"tags":[42,33,40,41,39,36],"class_list":["post-52","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-web-development","tag-clamp-function","tag-css","tag-max-function","tag-min-function","tag-responsive-layout","tag-web-development"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":9,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/52\/revisions\/713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}