{"id":517,"date":"2019-01-09T15:28:24","date_gmt":"2019-01-09T14:28:24","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=517"},"modified":"2019-01-09T15:28:24","modified_gmt":"2019-01-09T14:28:24","slug":"unidades-en-css","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/unidades-en-css\/","title":{"rendered":"Unitats en CSS"},"content":{"rendered":"<p>Gaireb\u00e9 des dels seus inicis, en el m\u00f3n del desenvolupament web s&#8217;ha treballat per trobar les millors maneres de definir les mides de les fonts i tamb\u00e9 la de tots els elements que configuren un document web. Amb la pres\u00e8ncia de diferents navegadors i de diferents dispositius \u2014amb diferents caracter\u00edstiques, mides i resolucions\u2014 s&#8217;ha fet imprescindible treballar amb unes unitats flexibles, en paral\u00b7lel a l&#8217;\u00fas del disseny responsiu (o <i lang=\"en\">Responsive Web Design<\/i>).<\/p>\n<p>Des de l&#8217;\u00fas d&#8217;una unitat est\u00e0tica com els p\u00edxels (px), passant per les unitats relatives (com els percentatges, EM o REM), amb CSS3 es pot treballar amb les <strong><i lang=\"en\">viewport units<\/i><\/strong>, amb les quals canvia i millora el panorama per aconseguir un millor control en la mida de les tipografies i dels objectes que es veuen en pantalla.<\/p>\n<p><iframe loading=\"lazy\" title=\"CSS Units: vh, vw, vmin, vmax #css #responsive #design\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/IWFqGsXxJ1E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Per a saber-ne m\u00e9s<\/h2>\n<p><a href=\"https:\/\/zellwk.com\/blog\/viewport-based-typography\/\" hreflang=\"en\">Viewport unit based typography<\/a>, Zell Liew (mar\u00e7, 2016)<\/p>\n<p><a href=\"https:\/\/www.sitepoint.com\/css-viewport-units-quick-start\/\" hreflang=\"en\">CSS viewport units: a quick start<\/a>, Sitepoint<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/viewport-sized-typography\/\" hreflang=\"en\">Viewport sized typography<\/a>, Chris Coyier, CSS-Tricks (abril 2012 i actualitzat l&#8217;octubre de 2014)<\/p>\n<p>Tamb\u00e9 podeu revisar l&#8217;apunt sobre <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/tipografia\/\">Tipografia<\/a> publicat en aquest mateix blog.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gaireb\u00e9 des dels seus inicis, en el m\u00f3n del desenvolupament web s&#8217;ha treballat per trobar les millors maneres de definir les mides de les fonts i tamb\u00e9 la de tots els elements que configuren un document web. Amb la pres\u00e8ncia de diferents navegadors i de diferents dispositius \u2014amb diferents caracter\u00edstiques, mides i resolucions\u2014 s&#8217;ha fet &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/unidades-en-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Unitats en CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":163,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-517","post","type-post","status-publish","format-standard","hentry","category-css","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":3,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"predecessor-version":[{"id":524,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/517\/revisions\/524"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}