{"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\/css\/unidades-en-css\/","title":{"rendered":"Unidades en CSS"},"content":{"rendered":"<p>Casi desde su inicio, en el mundo del desarrollo web se ha trabajado para encontrar las mejores formas de definir los tama\u00f1os de las fuentes y tambi\u00e9n la de todos los elementos que configuran un documento web. Con la presencia de diferentes navegadores y de diferentes dispositivos \u2014con diferentes caracter\u00edsticas, tama\u00f1os y resoluciones\u2014 se ha vuelto imprescindible trabajar con unas unidades flexibles, en paralelo al uso del dise\u00f1o adaptativo (o <i lang=\"en\">Responsive Web Design<\/i>).<\/p>\n<p>Desde el uso de una unidad est\u00e1tica como los p\u00edxeles (px), pasando por las unidades relativas (com los porcentajes, EM \u00f3 REM), con CSS3 se puede trabajar con las <strong><i lang=\"en\">viewport units<\/i><\/strong>, con las cuales cambia y mejora el panorama para conseguir un mejor control en el tama\u00f1o de las tipograf\u00edas y de los elementos que se ven 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>Para saber m\u00e1s<\/h2>\n<p><a href=\"https:\/\/zellwk.com\/blog\/viewport-based-typography\/\" hreflang=\"en\">Viewport unit based typography<\/a>, Zell Liew (marzo 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 y actualizado en octubre de 2014)<\/p>\n<p>Tambi\u00e9n pod\u00e9is revisar el apunte sobre <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/tipografia\/\">tipograf\u00eda<\/a> publicado en este mismo blog.<\/p>","protected":false},"excerpt":{"rendered":"<p>Casi desde su inicio, en el mundo del desarrollo web se ha trabajado para encontrar las mejores formas de definir los tama\u00f1os de las fuentes y tambi\u00e9n la de todos los elementos que configuran un documento web. Con la presencia de diferentes navegadores y de diferentes dispositivos \u2014con diferentes caracter\u00edsticas, tama\u00f1os y resoluciones\u2014 se ha &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/unidades-en-css\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abUnidades en CSS\u00bb<\/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\/wp-json\/wp\/v2\/posts\/517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":3,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"predecessor-version":[{"id":524,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/517\/revisions\/524"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}