{"id":47,"date":"2023-05-08T14:37:34","date_gmt":"2023-05-08T12:37:34","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=47"},"modified":"2023-05-08T15:29:17","modified_gmt":"2023-05-08T13:29:17","slug":"unitats","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/unitats\/","title":{"rendered":"Unitats"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Unitats absolutes i relatives<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Oblidem-nos del cm i donem la benvinguda als p\u00edxels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El p\u00edxel (px) \u00e9s cadascun dels punts d&#8217;una pantalla. A quants cm correspon? \u00c9s impossible fer una equival\u00e8ncia, perqu\u00e8 cada pantalla pot tenir m\u00e9s o menys p\u00edxels (un ordinador de sobretaula, un port\u00e0til, un m\u00f2bil..) o tenir-los m\u00e9s o menys separats (un ordinador vs. un projector).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ja hem vist quines unitats podem fer servir per modificar el color, ara veurem quines unitats podem fer servir per modificar les dimensions (amplades, al\u00e7ades, marges, tipografia,&#8230;).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comen\u00e7arem per modificar la mida del text. Aquesta propietat s&#8217;anomena font-size i podem fer servir diferents unitats de mesura:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>p\u00edxels<\/li>\n\n\n\n<li>em<\/li>\n\n\n\n<li>rem<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u00e8 \u00e9s un em?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El \u00abem\u00bb \u00e9s una unitat de mesura relativa a una altra mesura. \u00c9s un concepte, en realitat, poc digital. Ve de la impremta! La M, a les tipografies per impressi\u00f3 es fa servir per donar informaci\u00f3 sobre les altres lletres d&#8217;una mateixa tipografia. Si prenem la lletra M de refer\u00e8ncia podem dir coses com: \u00abla lletra \u00aba\u00bb min\u00fascula ocupa la meitat que una \u00abM\u00bb, la \u00aba\u00bb ocupa 0.5 emes\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aquesta unitat es fa servir al CSS per indicar una dimensi\u00f3 en relaci\u00f3 a la mida de la tipografia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per exemple: el marge per sota dels h1 ser\u00e0 de 1 em.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1{<br>  margin-bottom: 1em;<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A quants p\u00edxels correspondr\u00e0 aquest 1 em? Dependr\u00e0 de la mida de la tipografia dels h1. Si els h1 fan s\u00f3n de 32px, 1em seran exactament 32px. Per\u00f2 si els h1 fan 40px, aleshores 1em seran 40px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En realitat, el navegador fa servir l'\u00bbem\u00bb de s\u00e8rie. Per aix\u00f2, si canviem el font-size d&#8217;un element (par\u00e0grafs, per exemple), els marge inferior creix o decreix proporcionalment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u00e8 \u00e9s un rem?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un rem \u00e9s una unitat relativa, per\u00f2 no relativa a la tipografia del propi element, sin\u00f3 amb la tipografia de l&#8217;arrel del document (root). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per defecte, el navegador estableix la mida de text base (la de l&#8217;arrel) en 16px. A partir d&#8217;aquest valor, calcula la resta d&#8217;elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Els par\u00e0grafs mesuren 1rem (16px)<\/li>\n\n\n\n<li>Els h1 i h2 mesuren 2rem (32px)<\/li>\n\n\n\n<li>Els h3 mesures 1.5rem (24px)<\/li>\n\n\n\n<li>Els h4 mesures 1.25rem(20px)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aquestes mides poden canviar si l&#8217;usuari modifica la configuraci\u00f3 del seu navegador. Per exemple, alg\u00fa amb molt mala visi\u00f3 pot canviar la mida de text base a 30px. Si fa aix\u00f2, autom\u00e0ticament tots els elements de la p\u00e0gina canvien de manera proporcional. I com que les mides dels elements canvien, tamb\u00e9 canvia tot all\u00f2 definit en proporci\u00f3 a la mida de cada element (marges, padding,..)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1015\" height=\"780\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.13.59.png\" alt=\"Ajustos de la mida base\" class=\"wp-image-50\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.13.59.png 1015w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.13.59-300x231.png 300w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.13.59-768x590.png 768w\" sizes=\"auto, (max-width: 1015px) 100vw, 1015px\" \/><figcaption class=\"wp-element-caption\"><em>Aqu\u00ed pots veure com la tipografia predeterminada del navegador \u00e9s Times a 16px. No vol dir que tots els elements facin 16px, sin\u00f3 que tots els elements estan dimensionats a partir d&#8217;aquesta mida.<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Com modifiquem la mida de text base amb CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Amb CSS podem modificar la mida de text base, fent una regla amb el selector html i donant un valor a la propietat font-size:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html{<br>   font-size: 24px; <br>}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si modifiquem la mida de text base a 24px, quina mida tindran (en p\u00edxels), per defecte aquests elements?<br>&#8211; h1<br>&#8211; h2<br>&#8211; h3<br>&#8211; h4<br>&#8211; p<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(Recorda: per defecte els par\u00e0grafs mesuren 1rem; els h1 i h2, 2rem; els h3, 1.5rem i els h4,  1.25rem)<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Quins avantatges t\u00e9 treballar amb unitats relatives?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les unitats relatives permeten plantejar el CSS com un sistema. Si definim una mida de text base i definim la mida de qualsevol element en rem, podrem amplicari reduir la mida de la tipografia canviant un \u00fanic valor.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aix\u00f2 ser\u00e0 pr\u00e0ctic i ens permetr\u00e0 anar m\u00e9s r\u00e0pid fent modificacions<\/li>\n\n\n\n<li>La nostra p\u00e0gina web ser\u00e0 m\u00e9s accessible, ja que si l&#8217;usuari augmenta la tipografia, tot creixer\u00e0 en proporci\u00f3.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Altres unitats de mesura: el percentatge<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En molts casos, sobretot quan maquetem i distribuim elements a dreta i esquerra, haurem de definir les dimensions fent servir el percentatge (%). Per exemple, podrem fer files amb 4 columnes, on cadascuna ocupi el 25% de l&#8217;amplada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unitats absolutes i relatives Oblidem-nos del cm i donem la benvinguda als p\u00edxels. El p\u00edxel (px) \u00e9s cadascun dels punts d&#8217;una pantalla. A quants cm correspon? \u00c9s impossible fer una equival\u00e8ncia, perqu\u00e8 cada pantalla pot tenir m\u00e9s o menys p\u00edxels (un ordinador de sobretaula, un port\u00e0til, un m\u00f2bil..) o tenir-los m\u00e9s o menys separats (un&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/unitats\/\">Continueu llegint <span class=\"screen-reader-text\">Unitats<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":5,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/47\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}