{"id":987513005,"date":"2025-04-17T16:43:34","date_gmt":"2025-04-17T15:43:34","guid":{"rendered":"https:\/\/mgdev.work\/?p=987513005"},"modified":"2025-09-12T09:33:39","modified_gmt":"2025-09-12T08:33:39","slug":"vw-and-vh-instead-of-px-in-web-development","status":"publish","type":"post","link":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/","title":{"rendered":"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web"},"content":{"rendered":"

En el desarrollo web, el dise\u00f1o responsive es uno de los aspectos m\u00e1s cr\u00edticos y con vw y vh se puede crear una experiencia visualmente atractiva y f\u00e1cil de usar. Con la creciente variedad de dispositivos -tel\u00e9fonos inteligentes, tabletas, ordenadores de sobremesa e incluso smartwatches-, los dise\u00f1adores deben asegurarse de que sus sitios web se adapten con elegancia a diferentes tama\u00f1os y resoluciones de pantalla.<\/p>\n

Por esta raz\u00f3n, los desarrolladores web modernos suelen utilizar \u00abvw\u00bb (viewport width) y \u00abvh\u00bb (viewport height) en lugar de los m\u00e1s tradicionales \u00abpx\u00bb (p\u00edxeles) para dimensionar los elementos de una p\u00e1gina web.<\/p>\n

\u00bfQu\u00e9 son \u00abvw\u00bb y \u00abvh\u00bb?<\/h2>\n

\u00abvw\u00bb (Anchura de la ventana gr\u00e1fica): 1 \u00abvw\u00bb equivale al 1% de la anchura de la ventana gr\u00e1fica del navegador. Si la ventana tiene 1000 p\u00edxeles de ancho, 1 \u00abvw\u00bb equivaldr\u00eda a 10 p\u00edxeles.
\n\u00abvh\u00bb (altura de la ventana gr\u00e1fica): 1 \u00abvh\u00bb equivale al 1% de la altura de la ventana gr\u00e1fica. Si su ventana tiene 800 p\u00edxeles de altura, 1 \u00abvh\u00bb equivaldr\u00eda a 8 p\u00edxeles.<\/p>\n

Estas unidades son relativas a la ventana gr\u00e1fica, que es el \u00e1rea visible de una p\u00e1gina web. A diferencia de \u00abpx\u00bb, que es una unidad absoluta que permanece est\u00e1tica independientemente del tama\u00f1o de la pantalla, \u00abvw\u00bb y \u00abvh\u00bb se ajustan din\u00e1micamente a medida que cambia la ventana gr\u00e1fica.<\/p>\n

Ventajas de utilizar \u00abvw\u00bb y \u00abvh\u00bb frente a \u00abpx\u00bb<\/h3>\n

1. Dise\u00f1o adaptable:<\/strong><\/h3>\n

Cuando se utilizan p\u00edxeles (`px`) para el dimensionamiento, el dise\u00f1o queda fijo. Esto significa que, a medida que cambia el tama\u00f1o de la pantalla (de escritorio a m\u00f3vil, por ejemplo), los elementos pueden aparecer demasiado grandes, demasiado peque\u00f1os o desalineados. En cambio, \u00abvw\u00bb y \u00abvh\u00bb permiten que el dise\u00f1o se adapte autom\u00e1ticamente a los distintos tama\u00f1os de pantalla, manteniendo elementos proporcionados que se ven bien en cualquier dispositivo.<\/p>\n

Por ejemplo:<\/strong>
\n\u00ab`css
\n\/* Con px *\/
\n.header {
\nheight: 100px;
\nwidth: 600px;
\n}<\/p>\n

\/* Con vw y vh *\/
\n.header {
\nheight: 10vh;
\nwidth: 60vw;
\n}
\n\u00ab\u00ab
\nCon \u00abvw\u00bb y \u00abvh\u00bb, las dimensiones de la cabecera se ajustar\u00e1n proporcionalmente, garantizando que el dise\u00f1o funcione tanto en un monitor de sobremesa ancho como en una pantalla de m\u00f3vil peque\u00f1a.<\/strong><\/p>\n

2. Dimensionamiento basado en el puerto de visualizaci\u00f3n:<\/strong><\/h3>\n

Como las unidades \u00abvw\u00bb y \u00abvh\u00bb se basan en la ventana gr\u00e1fica del navegador, los desarrolladores pueden crear dise\u00f1os que se adapten al espacio disponible en la pantalla. Esto es especialmente \u00fatil para componentes a pantalla completa, como banners, modales y deslizadores, en los que es crucial mantener las proporciones correctas.<\/p>\n

Por ejemplo, un fondo de pantalla completa puede conseguirse f\u00e1cilmente utilizando \u00abvh\u00bb:<\/strong>
\n\u00ab`css
\n.full-screen-banner {
\nheight: 100vh;
\nwidth: 100vw;
\n}
\n\u00ab\u00ab
\nEsto garantiza que el banner ocupe siempre toda la pantalla, independientemente del tama\u00f1o o la resoluci\u00f3n del dispositivo.<\/strong><\/p>\n

3. Tipograf\u00eda fluida:<\/h3>\n

La tipograf\u00eda fluida, en la que el tama\u00f1o de las fuentes se adapta din\u00e1micamente al tama\u00f1o de la ventana gr\u00e1fica, es una tendencia creciente en el dise\u00f1o web. El uso de `vw` para los tama\u00f1os de fuente garantiza que el texto se ajuste proporcionalmente a los distintos dispositivos, mejorando la legibilidad y manteniendo una est\u00e9tica de dise\u00f1o coherente.<\/p>\n

Por ejemplo:<\/strong>
\n\u00ab`css
\nh1 {
\nfont-size: 5vw;
\n}
\n\u00ab`
\nEn este caso, el texto del encabezado ocupar\u00e1 el 5% del ancho de la ventana gr\u00e1fica, lo que permite fuentes m\u00e1s grandes en pantallas m\u00e1s grandes y fuentes m\u00e1s peque\u00f1as en dispositivos m\u00f3viles sin necesidad de consultas de medios.<\/strong><\/p>\n

4. No hay sobrecarga de consulta de medios:<\/h3>\n

Un problema habitual del uso de `px` es que los desarrolladores a menudo tienen que escribir numerosas consultas de medios para manejar diferentes tama\u00f1os de pantalla. Esto puede sobrecargar el archivo CSS y dificultar su mantenimiento. El uso de \u00abvw\u00bb y \u00abvh\u00bb reduce la necesidad de realizar un n\u00famero excesivo de consultas de medios, ya que los elementos de dise\u00f1o cambian de tama\u00f1o de forma natural en funci\u00f3n de la ventana gr\u00e1fica.<\/p>\n

5. Mejor accesibilidad:<\/h4>\n

El uso de \u00abvw\u00bb y \u00abvh\u00bb tambi\u00e9n puede mejorar la accesibilidad. Dado que estas unidades se ajustan en funci\u00f3n del tama\u00f1o de la pantalla, pueden ayudar a garantizar que elementos como los botones, las im\u00e1genes y el texto mantengan el tama\u00f1o adecuado para los usuarios con deficiencias visuales que puedan depender del zoom.<\/p>\n

6. Coherencia entre dispositivos:<\/h3>\n

Al utilizar \u00abpx\u00bb, los dise\u00f1os pueden parecer perfectos en un dispositivo pero completamente diferentes en otro. Esta incoherencia puede resultar frustrante, sobre todo a la hora de garantizar una experiencia de usuario fluida. Con \u00abvw\u00bb y \u00abvh\u00bb, los tama\u00f1os relativos se mantienen constantes, lo que proporciona una experiencia m\u00e1s unificada en m\u00faltiples dispositivos.<\/p>\n

\u00bfCu\u00e1ndo se debe seguir utilizando \u00abpx\u00bb?<\/h3>\n

Aunque \u00abvw\u00bb y \u00abvh\u00bb ofrecen muchas ventajas, hay ocasiones en las que \u00abpx\u00bb sigue siendo la mejor opci\u00f3n:<\/strong>
\nElementos pixelados:<\/strong> Los p\u00edxeles pueden ser \u00fatiles si necesitas elementos que mantengan un tama\u00f1o fijo independientemente del tama\u00f1o de la pantalla (por ejemplo, iconos o peque\u00f1os componentes de IU).
\nBordes y detalles de dise\u00f1o precisos:<\/strong> Los p\u00edxeles pueden ofrecer un mayor control de los bordes finos, los m\u00e1rgenes o el relleno, especialmente cuando importan las peque\u00f1as diferencias de tama\u00f1o.<\/p>\n

Conclusi\u00f3n<\/h4>\n

En el desarrollo web moderno, la flexibilidad y la adaptabilidad son fundamentales para ofrecer excelentes experiencias de usuario en distintos dispositivos. Si optas por las unidades \u00abvw\u00bb y \u00abvh\u00bb en lugar de \u00abpx\u00bb, podr\u00e1s crear dise\u00f1os m\u00e1s adaptables, mantener la coherencia del dise\u00f1o y realizar menos ajustes mediante consultas de medios. Aunque \u00abpx\u00bb sigue teniendo su lugar para algunos elementos de dise\u00f1o espec\u00edficos, la adopci\u00f3n de unidades relativas dar\u00e1 como resultado dise\u00f1os m\u00e1s limpios, escalables y f\u00e1ciles de usar.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

En el desarrollo web, el dise\u00f1o responsive es uno de los aspectos m\u00e1s cr\u00edticos y con vw y vh se puede crear una experiencia visualmente atractiva y f\u00e1cil de usar. Con la creciente variedad de dispositivos -tel\u00e9fonos inteligentes, tabletas, ordenadores de sobremesa e incluso smartwatches-, los dise\u00f1adores deben asegurarse de que sus sitios web se […]<\/p>\n","protected":false},"author":1,"featured_media":987514970,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1,"footnotes":""},"categories":[107],"tags":[],"class_list":["post-987513005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nPor qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics\" \/>\n<meta property=\"og:description\" content=\"En el desarrollo web, el dise\u00f1o responsive es uno de los aspectos m\u00e1s cr\u00edticos y con vw y vh se puede crear una experiencia visualmente atractiva y f\u00e1cil de usar. Con la creciente variedad de dispositivos -tel\u00e9fonos inteligentes, tabletas, ordenadores de sobremesa e incluso smartwatches-, los dise\u00f1adores deben asegurarse de que sus sitios web se […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Mallorca Graphics\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-17T15:43:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-12T08:33:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mallorca Graphics\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mallorca Graphics\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/\",\"url\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/\",\"name\":\"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics\",\"isPartOf\":{\"@id\":\"https:\/\/mgdev.work\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg\",\"datePublished\":\"2025-04-17T15:43:34+00:00\",\"dateModified\":\"2025-09-12T08:33:39+00:00\",\"author\":{\"@id\":\"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f\"},\"breadcrumb\":{\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage\",\"url\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg\",\"contentUrl\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg\",\"width\":900,\"height\":600,\"caption\":\"vw and vh\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mgdev.work\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mgdev.work\/es\/#website\",\"url\":\"https:\/\/mgdev.work\/es\/\",\"name\":\"Mallorca Graphics\",\"description\":\"My WordPress Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mgdev.work\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f\",\"name\":\"Mallorca Graphics\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mgdev.work\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f31942cede9cd598dc605bcabbc38892eeddd5ef7514a9c55a639a5037cb2a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f31942cede9cd598dc605bcabbc38892eeddd5ef7514a9c55a639a5037cb2a8?s=96&d=mm&r=g\",\"caption\":\"Mallorca Graphics\"},\"sameAs\":[\"https:\/\/mgdev.work\"],\"url\":\"https:\/\/mgdev.work\/es\/author\/pedro-alvarez\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Mallorca Graphics\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics","og_description":"En el desarrollo web, el dise\u00f1o responsive es uno de los aspectos m\u00e1s cr\u00edticos y con vw y vh se puede crear una experiencia visualmente atractiva y f\u00e1cil de usar. Con la creciente variedad de dispositivos -tel\u00e9fonos inteligentes, tabletas, ordenadores de sobremesa e incluso smartwatches-, los dise\u00f1adores deben asegurarse de que sus sitios web se […]","og_url":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/","og_site_name":"Mallorca Graphics","article_published_time":"2025-04-17T15:43:34+00:00","article_modified_time":"2025-09-12T08:33:39+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg","type":"image\/jpeg"}],"author":"Mallorca Graphics","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Mallorca Graphics","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/","url":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/","name":"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web - Mallorca Graphics","isPartOf":{"@id":"https:\/\/mgdev.work\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage"},"image":{"@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg","datePublished":"2025-04-17T15:43:34+00:00","dateModified":"2025-09-12T08:33:39+00:00","author":{"@id":"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f"},"breadcrumb":{"@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#primaryimage","url":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg","contentUrl":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/04\/59.jpg","width":900,"height":600,"caption":"vw and vh"},{"@type":"BreadcrumbList","@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mgdev.work\/es\/"},{"@type":"ListItem","position":2,"name":"Por qu\u00e9 deber\u00eda utilizar vw y vh en lugar de px en el desarrollo web"}]},{"@type":"WebSite","@id":"https:\/\/mgdev.work\/es\/#website","url":"https:\/\/mgdev.work\/es\/","name":"Mallorca Graphics","description":"My WordPress Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mgdev.work\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f","name":"Mallorca Graphics","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mgdev.work\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0f31942cede9cd598dc605bcabbc38892eeddd5ef7514a9c55a639a5037cb2a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f31942cede9cd598dc605bcabbc38892eeddd5ef7514a9c55a639a5037cb2a8?s=96&d=mm&r=g","caption":"Mallorca Graphics"},"sameAs":["https:\/\/mgdev.work"],"url":"https:\/\/mgdev.work\/es\/author\/pedro-alvarez\/"},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mgdev.work\/es\/vw-and-vh-instead-of-px-in-web-development\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Mallorca Graphics"}]}},"_links":{"self":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/comments?post=987513005"}],"version-history":[{"count":3,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513005\/revisions"}],"predecessor-version":[{"id":987514194,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513005\/revisions\/987514194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/media\/987514970"}],"wp:attachment":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/media?parent=987513005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/categories?post=987513005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/tags?post=987513005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}