{"id":2444,"date":"2022-03-30T11:25:01","date_gmt":"2022-03-30T09:25:01","guid":{"rendered":"http:\/\/jakisproblem.pl\/?p=2444"},"modified":"2022-03-30T11:25:01","modified_gmt":"2022-03-30T09:25:01","slug":"jak-stworzyc-responsywny-rozmiar-czcionki-za-pomoca-jednostki-css","status":"publish","type":"post","link":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/2022\/03\/30\/jak-stworzyc-responsywny-rozmiar-czcionki-za-pomoca-jednostki-css\/","title":{"rendered":"Jak stworzy\u0107 responsywny rozmiar czcionki za pomoc\u0105 jednostki CSS"},"content":{"rendered":"<div class=\"span-34 justify postContent last\">\n<p>Ostatnio robi\u0119 poprawki na blogu. Przygl\u0105dam si\u0119 temu, jak pisa\u0142em kiedy\u015b CSS. Widz\u0119, \u017ce dla pewnych nag\u0142\u00f3wk\u00f3w tekstowych napisa\u0142em tyle\u00a0<strong>&#8222;@media Queries&#8221;<\/strong>, aby tekst zawsze dopasowywa\u0142 si\u0119 do wielko\u015bci ekranu. Oczywi\u015bcie tak nie powinno si\u0119 robi\u0107. W sumie to rozwi\u0105zanie zak\u0142ada pewn\u0105 ilo\u015b\u0107 znak\u00f3w tek\u015bcie.<\/p>\n<p>Sp\u00f3jrz. Czy to dobrze wygl\u0105da?<\/p>\n<pre class=\"language-css\"><code class=\"hljs\"><span class=\"hljs-class\">.title<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">text-align<\/span>:<span class=\"hljs-value\"> center<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">2.3em<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1.1<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">text-transform<\/span>:<span class=\"hljs-value\"> uppercase<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-style<\/span>:<span class=\"hljs-value\"> normal<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-weight<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">700<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0<\/span><\/span><\/span>;\r\n    <span class=\"hljs-comment\">\/* border-top: solid 1px white; *\/<\/span>\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position<\/span>:<span class=\"hljs-value\"> relative<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">z-index<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">20em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 2<span class=\"hljs-class\">.7em<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">28em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 2<span class=\"hljs-class\">.5em<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">37em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 3<span class=\"hljs-class\">.9em<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">44em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 5<span class=\"hljs-class\">.9em<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">58em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 7<span class=\"hljs-class\">.4em<\/span>;\r\n}\r\n\r\n<\/code><\/pre>\n<p><span style=\"font-size: 16px;\">Mog\u0142o by\u0107 gorzej. Mog\u0142em u\u017cy\u0107 jQuery i dynamicznie oblicza\u0107 rozmiar ekranu i dopasowywa\u0107 rozmiar czcionki w ten spos\u00f3b.<\/span><\/p>\n<p>Zaraz.<\/p>\n<p>To w sumie dobry pomys\u0142, gdyby tylko mo\u017cna by\u0142o, to zrobi\u0107 u\u017cywaj\u0105c tylko CSS.<\/p>\n<p>Na szcz\u0119\u015bcie \u017cyjemy w roku 2020 i istniej\u0105 od wielu lat lepsze rozwi\u0105zania.\u00a0 W CSS, istnieje co\u015b takiego jak rozmiar ViewPort. Okre\u015bla on rozmiar rzeczy w zale\u017cno\u015bci od rozmiaru viewportu, a sam viewport mo\u017cna uzna\u0107 za rozmiar ekranu w zale\u017cno\u015bci od urz\u0105dzenia, na jakim wy\u015bwietla si\u0119 strona internetowa.<\/p>\n<p>Jedna jednostka to 1% rozmiaru jednego z wymiar\u00f3w osi ekranu. D\u0142ugo\u015b\u0107 albo szeroko\u015b\u0107.<\/p>\n<p>Te rozmiary mog\u0105 by\u0107 bardzo u\u017cyteczne<\/p>\n<h3>Dlaczego to jest takie wspania\u0142e<\/h3>\n<p>Istnieje wiele powod\u00f3w:<\/p>\n<ul>\n<li>Nie musisz pisa\u0107 z\u0142o\u017conej logiki, aby uzyska\u0107 efekt<\/li>\n<li>Mo\u017cesz bardziej intuicyjnie okre\u015bli\u0107 rozmiar swojego tekstu wzgl\u0119dem ekranu<\/li>\n<li>Masz dok\u0142adne powi\u0105zanie pomi\u0119dzy rozmiarem ekranu a t\u0105 zmienn\u0105<\/li>\n<\/ul>\n<h3>Jak to dzia\u0142a<\/h3>\n<p>Jakie mamy rozmiary do dyspozycji:<\/p>\n<p>1 vm : 1% d\u0142ugo\u015bci viewport<\/p>\n<p>1vh : 1% wysoko\u015bci viewport<\/p>\n<p>1vmin : 1% wysoko\u015bci lub d\u0142ugo\u015bci. Zostanie wybrany rozmiar, kt\u00f3ry jest mniejszy<\/p>\n<p>1 vmax : 1% wysoko\u015bci lub d\u0142ugo\u015bci. Zostanie wybrany rozmiar, kt\u00f3ry jest wi\u0119kszy<\/p>\n<h3>Przyk\u0142ad u\u017cycia<\/h3>\n<p>Wracaj\u0105c, do poprzedniego przyk\u0142adu. Mo\u017cna by go poprawi\u0107 w taki spos\u00f3b.<\/p>\n<pre class=\"language-css\"><code class=\"hljs\"><span class=\"hljs-class\">.title<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">text-align<\/span>:<span class=\"hljs-value\"> center<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">2.3em<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1.1<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">text-transform<\/span>:<span class=\"hljs-value\"> uppercase<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-style<\/span>:<span class=\"hljs-value\"> normal<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-weight<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">700<\/span><\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0<\/span><\/span><\/span>;\r\n    <span class=\"hljs-comment\">\/* border-top: solid 1px white; *\/<\/span>\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position<\/span>:<span class=\"hljs-value\"> relative<\/span><\/span>;\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">z-index<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">20em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 2<span class=\"hljs-class\">.7em<\/span>;\r\n    <span class=\"hljs-tag\">font-size<\/span>: 12<span class=\"hljs-tag\">vw<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">28em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 2<span class=\"hljs-class\">.5em<\/span>;\r\n    <span class=\"hljs-tag\">font-size<\/span>: 12<span class=\"hljs-tag\">vw<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">37em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 3<span class=\"hljs-class\">.9em<\/span>;\r\n    <span class=\"hljs-tag\">font-size<\/span>: 12<span class=\"hljs-tag\">vw<\/span>;\r\n}\r\n\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">44em<\/span>)\r\n.title <\/span>{\r\n    <span class=\"hljs-tag\">font-size<\/span>: 5<span class=\"hljs-class\">.9em<\/span>;\r\n    <span class=\"hljs-tag\">font-size<\/span>: 12<span class=\"hljs-tag\">vw<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>Zauwa\u017c, \u017ce zostawi\u0142em stare warto\u015bci na wszelki wypadek, gdy trafi\u0119 na star\u0105 przegl\u0105dark\u0119, w kt\u00f3rej ta technika nie jest wspierana.<\/p>\n<p>Oto kolejny przyk\u0142ad.<\/p>\n<pre class=\"language-css\"><code class=\"hljs\"><span class=\"hljs-tag\">h1<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">5.9vw<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n\r\n<span class=\"hljs-tag\">h2<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">3.0vh<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n\r\n<span class=\"hljs-tag\">p<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">2vmin<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span><\/code><\/pre>\n<p>Sprawd\u017a te demo<\/p>\n<p>Zmie\u0144 rozmiary ekranu, aby zobaczy\u0107 czy tekst te\u017c si\u0119 zmienia.<\/p>\n<p><iframe title=\"vw Unit\" src=\"https:\/\/codepen.io\/Crezber\/embed\/vYGEpPR?height=388&amp;theme-id=dark&amp;default-tab=html,result\" height=\"388\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<h3>Czy mo\u017cna to zrobi\u0107 jeszcze lepiej?<\/h3>\n<p>Nie wiem, czy wiesz, ale od jakiego\u015b czasu istnieje funkcja calc() w CSS.<\/p>\n<p>Dlaczego nie stworzy\u0107 funkcji, kt\u00f3ra by ustala\u0142a rozmiary czcionki wed\u0142ug pewnego wzoru. Dodatkowo dla rozmiaru ekranu 1000px ustaliby\u015bmy sta\u0142y rozmiar tekstu.<\/p>\n<pre class=\"language-css\"><code class=\"hljs\"><span class=\"hljs-tag\">html<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">16px<\/span><\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">320px<\/span>) <\/span>{\r\n  <span class=\"hljs-tag\">html<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">calc<\/span>(<span class=\"hljs-number\">16px<\/span> + <span class=\"hljs-number\">8<\/span> * ((<span class=\"hljs-number\">100vw<\/span> - <span class=\"hljs-number\">320px<\/span>) \/ <span class=\"hljs-number\">680<\/span>))<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> screen and (min-width: <span class=\"hljs-number\">1000px<\/span>) <\/span>{\r\n  <span class=\"hljs-tag\">html<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">24px<\/span><\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}<\/code><\/pre>\n<p>Nied\u0142ugo b\u0119dzie mo\u017cna skorzysta\u0107 z funkcji max() i min() w CSS. Co upro\u015bci ten kod jeszcze bardziej.<\/p>\n<pre class=\"language-javascript\"><code class=\"hljs\">html {\r\n  font-size: min(max(<span class=\"hljs-number\">1<\/span>rem, <span class=\"hljs-number\">4<\/span>vw), <span class=\"hljs-number\">24<\/span>px);\r\n}<\/code><\/pre>\n<p>Istnieje jeszcze najnowsza funkcja, kt\u00f3ra spe\u0142ni podobny cel. Jest to clamp(). U\u017cywaj\u0105c jej , mo\u017cna skr\u00f3ci\u0107 kod jeszcze bardziej.<\/p>\n<pre class=\"language-css\"><code class=\"hljs\"><span class=\"hljs-tag\">body<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">clamp<\/span>(<span class=\"hljs-number\">100%<\/span>, <span class=\"hljs-number\">1rem<\/span> + <span class=\"hljs-number\">2vw<\/span>, <span class=\"hljs-number\">24px<\/span>)<\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span> <\/code><\/pre>\n<p><span style=\"font-size: 18px;\">O AUTORZE<br \/>\n<\/span><\/p>\n<\/div>\n<div class=\"span-34\">\n<div class=\"cloud myauthor\">\n<div class=\"subauthor\">\n<p>Nazywam si\u0119 <strong>Cezary Walenciuk<\/strong>.<\/p>\n<p>Pracuj\u0119 w Warszawie przy r\u00f3\u017cnych projektach webowych i mobilnych<\/p>\n<p>Moim marzeniem jest pomaganie innym osobom, kt\u00f3re zaczynaj\u0105 swoj\u0105 przygod\u0119 z programowaniem. Je\u015bli\u00a0<strong>chcesz mi pom\u00f3c<\/strong>\u00a0u\u017cyj kt\u00f3rego\u015b z przycisk\u00f3w na dole b\u0105d\u017a dodaj komentarz.<\/p>\n<p>https:\/\/cezarywalenciuk.pl\/blog\/programing\/jak-stworzyc-responsywny-rozmiar-czcionki-za-pomoca-jednostki-css-vw<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">Ostatnio robi\u0119 poprawki na blogu. Przygl\u0105dam si\u0119 temu, jak pisa\u0142em kiedy\u015b CSS. Widz\u0119, \u017ce dla pewnych nag\u0142\u00f3wk\u00f3w tekstowych napisa\u0142em tyle\u00a0&#8222;@media Queries&#8221;, aby tekst zawsze dopasowywa\u0142 si\u0119 do wielko\u015bci ekranu. Oczywi\u015bcie tak nie powinno si\u0119 robi\u0107. W sumie to rozwi\u0105zanie zak\u0142ada pewn\u0105 ilo\u015b\u0107 znak\u00f3w tek\u015bcie. Sp\u00f3jrz. Czy to dobrze wygl\u0105da? .title { text-align: center; font-size: 2.3em;&hellip;<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/2022\/03\/30\/jak-stworzyc-responsywny-rozmiar-czcionki-za-pomoca-jednostki-css\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[34,122],"class_list":["post-2444","post","type-post","status-publish","format-standard","hentry","category-bez-kategorii","tag-css","tag-html"],"_links":{"self":[{"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/posts\/2444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/comments?post=2444"}],"version-history":[{"count":1,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/posts\/2444\/revisions"}],"predecessor-version":[{"id":2445,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/posts\/2444\/revisions\/2445"}],"wp:attachment":[{"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/media?parent=2444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/categories?post=2444"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/u239160.webh.me\/jakisproblem.pl\/index.php\/wp-json\/wp\/v2\/tags?post=2444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}