{"id":987513007,"date":"2025-06-05T13:12:03","date_gmt":"2025-06-05T12:12:03","guid":{"rendered":"https:\/\/mgdev.work\/?p=987513007"},"modified":"2025-11-29T20:45:40","modified_gmt":"2025-11-29T19:45:40","slug":"5-important-css-units-responsive-design","status":"publish","type":"post","link":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/","title":{"rendered":"5 important CSS Units and how to use them in your responsive design"},"content":{"rendered":"<p data-pm-slice=\"1 1 []\">Comprender c\u00f3mo utilizar eficazmente las unidades CSS es crucial a la hora de crear sitios web modernos y con capacidad de respuesta (qu\u00e9 son <a href=\"https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design\" target=\"_blank\" rel=\"noopener\">los sitios web con capacidad de respuesta<\/a>). CSS ofrece diferentes unidades de medida para controlar el tama\u00f1o de los elementos, el espaciado y el comportamiento del dise\u00f1o. La elecci\u00f3n de la unidad adecuada influye directamente en la apariencia de un sitio web en distintos dispositivos, garantizando una experiencia fluida en diferentes tama\u00f1os de pantalla.  <\/p>\n<p>Con el auge del dise\u00f1o mobile-first y el desarrollo web responsivo, los dise\u00f1adores y desarrolladores web deben equilibrar flexibilidad, legibilidad y accesibilidad. El uso de unidades absolutas como <x id=\"gid_0\"><\/x> proporciona una precisi\u00f3n fija, mientras que las unidades relativas como <x id=\"gid_1\"><\/x>, <x id=\"gid_2\"><\/x>, <x id=\"gid_3\"><\/x> y <x id=\"gid_4\"><\/x> permiten la adaptabilidad. Cada unidad define de forma \u00fanica los dise\u00f1os, por lo que es esencial comprender sus aplicaciones, ventajas y limitaciones.  <\/p>\n<p>Al dominar estas unidades CSS, los desarrolladores pueden crear dise\u00f1os fluidos, escalables y f\u00e1ciles de usar que se adaptan a diversas resoluciones de pantalla, desde tel\u00e9fonos inteligentes hasta ordenadores de sobremesa. Esta gu\u00eda explicar\u00e1 las diferencias clave entre <code>px<\/code>, <code>%<\/code>, <code>rem<\/code>, <code>vw<\/code>, y <code>vh<\/code>, junto con recomendaciones sobre cu\u00e1ndo utilizar cada unidad para obtener resultados \u00f3ptimos. <\/p>\n<p data-pm-slice=\"1 1 []\">CSS proporciona varias unidades para definir el tama\u00f1o de los elementos de una p\u00e1gina web. La elecci\u00f3n de la unidad correcta puede afectar a la capacidad de respuesta, la accesibilidad y la flexibilidad general del dise\u00f1o. En este art\u00edculo, desglosaremos cinco unidades CSS comunes: <strong>px, %, rem, vw y vh<\/strong>, y analizaremos cu\u00e1ndo utilizarlas.  <\/p>\n<h2 data-pm-slice=\"1 1 []\"><strong>5 Unidades CSS importantes<\/strong><\/h2>\n<h3>1. px (p\u00edxeles)<\/h3>\n<p><strong>Definici\u00f3n:<\/strong> La unidad <code>px<\/code> es una medida que indica un tama\u00f1o fijo correspondiente a los p\u00edxeles que aparecen en la pantalla. Un p\u00edxel equivale a un solo punto en la pantalla, y sirve como bloque de construcci\u00f3n fundamental para las im\u00e1genes digitales y el texto. Esta unidad es crucial en el dise\u00f1o web y el desarrollo de interfaces de usuario, ya que permite a los dise\u00f1adores establecer dimensiones precisas y mantener la coherencia visual en distintos dispositivos y resoluciones de pantalla. Mediante el uso de p\u00edxeles, los dise\u00f1adores pueden garantizar que los elementos aparezcan n\u00edtidos y claros, proporcionando una experiencia visual \u00f3ptima a los usuarios, independientemente del tama\u00f1o de su pantalla.   <\/p>\n<p><strong>Cu\u00e1ndo utilizarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Cuando se requiere un control preciso del tama\u00f1o de un elemento.<\/li>\n<li>Para elementos no sensibles como bordes, iconos y peque\u00f1os componentes de interfaz de usuario.<\/li>\n<li>Al dise\u00f1ar maquetas perfectas en p\u00edxeles (por ejemplo, maquetas que requieren dimensiones exactas).<\/li>\n<\/ul>\n<p><strong>Cu\u00e1ndo evitarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Evite utilizar <code>px<\/code> para los tama\u00f1os de texto, ya que no se adapta bien a la accesibilidad.<\/li>\n<li>No es ideal para dise\u00f1os totalmente responsivos, ya que no se adapta a diferentes tama\u00f1os de pantalla.<\/li>\n<\/ul>\n<h3>2. % (Porcentaje)<\/h3>\n<p><strong>Definici\u00f3n:<\/strong> La unidad <code>%<\/code> es una medida relativa que depende del tama\u00f1o del elemento padre, lo que significa que cuando se establece la, <code>width: 50%<\/code> unidad de porcentaje de un elemento es una anchura relativa al 50%, por ejemplo, el elemento ocupar\u00e1 la mitad de la anchura total de su padre. Esto permite dise\u00f1os flexibles que pueden adaptarse a diferentes tama\u00f1os de pantalla o dimensiones del contenedor, asegurando que los elementos se escalan proporcionalmente y mantienen su dise\u00f1o previsto en respuesta a los cambios en el tama\u00f1o del elemento padre. <\/p>\n<p><strong>Cu\u00e1ndo utilizarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Para dise\u00f1os fluidos que se adaptan a distintos tama\u00f1os de pantalla.<\/li>\n<li>Al definir anchuras para dise\u00f1os de rejilla o elementos flexibles.<\/li>\n<li>\u00datil para im\u00e1genes responsivas (<code>width: 100%<\/code>) para asegurar que escalan con sus contenedores.<\/li>\n<\/ul>\n<p><strong>Cu\u00e1ndo evitarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Si el elemento padre tiene una anchura indefinida, <code>%<\/code> podr\u00eda comportarse de forma impredecible.<\/li>\n<li>A veces puede dificultar el control del espaciado preciso.<\/li>\n<\/ul>\n<h3>3. rem (Ra\u00edz em)<\/h3>\n<p><strong>Definici\u00f3n:<\/strong> La unidad <code>rem<\/code> es una medida relativa basada en el tama\u00f1o del elemento ra\u00edz, concretamente el <code>html<\/code> de una p\u00e1gina web. Normalmente, los navegadores web establecen por defecto el valor de <code>1rem = 16px<\/code>, proporcionando una l\u00ednea de base est\u00e1ndar para el dimensionamiento de fuentes y elementos. Sin embargo, es importante se\u00f1alar que este valor por defecto no es fijo y puede ser ajustado por el desarrollador web para adaptarse mejor a las necesidades de dise\u00f1o del sitio. Utilizando unidades rem, los desarrolladores pueden crear un dise\u00f1o m\u00e1s escalable y receptivo que se adapte sin problemas a los distintos tama\u00f1os de pantalla y preferencias de los usuarios.   <\/p>\n<p><strong>Cu\u00e1ndo utilizarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Para que la tipograf\u00eda se adapte a las preferencias del usuario.<\/li>\n<li>Cuando se desea coherencia entre distintos componentes.<\/li>\n<li>Ideal para definir los rellenos, los m\u00e1rgenes y el espaciado para mantener dise\u00f1os proporcionales.<\/li>\n<\/ul>\n<p><strong>Cu\u00e1ndo evitarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Si el tama\u00f1o de la fuente ra\u00edz se cambia din\u00e1micamente, podr\u00eda afectar al dise\u00f1o de forma inesperada.<\/li>\n<li>Puede que no sea ideal para dise\u00f1os precisos y con p\u00edxeles perfectos.<\/li>\n<\/ul>\n<h3>4. vw (Anchura de la ventana)<\/h3>\n<p><strong>Definici\u00f3n:<\/strong> La unidad <code>vw<\/code> es una medida que representa un porcentaje de la anchura de la ventana gr\u00e1fica, que se refiere al \u00e1rea visible de una p\u00e1gina web en un navegador. En concreto, <code>1vw<\/code> equivale al 1% de la anchura total de la ventana del navegador, lo que la convierte en una valiosa herramienta para el dise\u00f1o responsivo. Mediante el uso de unidades vw, los dise\u00f1adores pueden crear dise\u00f1os que se adaptan con fluidez a los diferentes tama\u00f1os de pantalla, garantizando que los elementos se escalen proporcionalmente y mantengan su apariencia prevista independientemente del dispositivo del usuario. Esta flexibilidad permite una experiencia de usuario m\u00e1s coherente y puede mejorar el atractivo visual general de un sitio web.   <\/p>\n<p><strong>Cu\u00e1ndo utilizarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Para crear elementos de ancho completo (<code>width: 100vw<\/code>).<\/li>\n<li>Para una tipograf\u00eda responsive que se adapta a distintos tama\u00f1os de pantalla.<\/li>\n<li>Cuando necesite que un elemento se mantenga proporcional a la anchura de la ventana gr\u00e1fica.<\/li>\n<\/ul>\n<p><strong>Cu\u00e1ndo evitarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>En pantallas muy anchas, el texto y los elementos pueden resultar demasiado grandes.<\/li>\n<li>Puede provocar desplazamientos del dise\u00f1o cuando aparece o desaparece la barra de desplazamiento.<\/li>\n<\/ul>\n<h3>5. vh (Altura de la ventana)<\/h3>\n<p><strong>Definici\u00f3n:<\/strong> La unidad <code>vh<\/code> es una valiosa medida en dise\u00f1o web, que representa un porcentaje de la altura de la ventana gr\u00e1fica, que es el \u00e1rea visible de una p\u00e1gina web dentro de la ventana del navegador. Precisamente <code>1vh<\/code> corresponde al 1% de la altura total del navegador, lo que la convierte en una herramienta \u00fatil para crear dise\u00f1os responsivos que se adapten perfectamente a distintos tama\u00f1os de pantalla. Utilizando unidades vh, los dise\u00f1adores pueden asegurarse de que los elementos de una p\u00e1gina web mantienen la proporcionalidad y la coherencia visual, independientemente del dispositivo utilizado para ver el contenido. Esta flexibilidad permite una experiencia de navegaci\u00f3n m\u00e1s din\u00e1mica y f\u00e1cil de usar.   <\/p>\n<p><strong>Cu\u00e1ndo utilizarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>Para crear secciones a toda p\u00e1gina (<code>height: 100vh<\/code>).<\/li>\n<li>Al dise\u00f1ar secciones de h\u00e9roe que ocupan toda la ventana gr\u00e1fica.<\/li>\n<li>Aplicable a modales o ventanas emergentes a pantalla completa.<\/li>\n<\/ul>\n<p><strong>Cu\u00e1ndo evitarlo:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li>En los dispositivos m\u00f3viles, la altura de la ventana gr\u00e1fica puede cambiar cuando aparece el teclado.<\/li>\n<li>Puede dar lugar a problemas de desplazamiento no deseados si no se gestiona correctamente.<\/li>\n<\/ul>\n<h3>Conclusi\u00f3n<\/h3>\n<p>Cada una de las 5 unidades CSS tiene una funci\u00f3n espec\u00edfica y debe emplearse con cuidado para conseguir los resultados de dise\u00f1o y maquetaci\u00f3n deseados. Esto garantiza que los elementos visuales de una p\u00e1gina web tengan el tama\u00f1o y la posici\u00f3n adecuados entre s\u00ed, mejorando tanto la funcionalidad como la experiencia del usuario. <\/p>\n<ul data-spread=\"false\">\n<li>Utilice <strong>px<\/strong> para elementos fijos, no responsivos.<\/li>\n<li>Utilice <strong>%<\/strong> para dise\u00f1os flexibles que se adapten a sus elementos padre.<\/li>\n<li>Utilice <strong>rem<\/strong> para escalar la tipograf\u00eda y el espaciado.<\/li>\n<li>Utilizar <strong>vw<\/strong> para elementos basados en el ancho de la ventana gr\u00e1fica.<\/li>\n<li>Utilizar <strong>vh<\/strong> para elementos basados en la altura de la ventana gr\u00e1fica.<\/li>\n<\/ul>\n<p>Comprender estas diferencias le ayudar\u00e1 a crear dise\u00f1os m\u00e1s flexibles y accesibles sin perder el control sobre la maquetaci\u00f3n.<\/p>\n<p>Art\u00edculo relacionado: <a href=\"https:\/\/mgdev.work\/es\/mobile-optimization-in-web-design\/\">Optimizaci\u00f3n m\u00f3vil en el dise\u00f1o web: Garantizar una experiencia de usuario fluida<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprender c\u00f3mo utilizar eficazmente las unidades CSS es crucial a la hora de crear sitios web modernos y con capacidad de respuesta (qu\u00e9 son los sitios web con capacidad de respuesta). CSS ofrece diferentes unidades de medida para controlar el tama\u00f1o de los elementos, el espaciado y el comportamiento del dise\u00f1o. La elecci\u00f3n de la [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":987514955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[107],"tags":[],"class_list":["post-987513007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 important CSS Units and how to use them in your responsive design - 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=\"5 important CSS Units and how to use them in your responsive design - Mallorca Graphics\" \/>\n<meta property=\"og:description\" content=\"Comprender c\u00f3mo utilizar eficazmente las unidades CSS es crucial a la hora de crear sitios web modernos y con capacidad de respuesta (qu\u00e9 son los sitios web con capacidad de respuesta). CSS ofrece diferentes unidades de medida para controlar el tama\u00f1o de los elementos, el espaciado y el comportamiento del dise\u00f1o. La elecci\u00f3n de la [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Mallorca Graphics\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-05T12:12:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-29T19:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.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=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/\",\"url\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/\",\"name\":\"5 important CSS Units and how to use them in your responsive design - Mallorca Graphics\",\"isPartOf\":{\"@id\":\"https:\/\/mgdev.work\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg\",\"datePublished\":\"2025-06-05T12:12:03+00:00\",\"dateModified\":\"2025-11-29T19:45:40+00:00\",\"author\":{\"@id\":\"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f\"},\"breadcrumb\":{\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage\",\"url\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg\",\"contentUrl\":\"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg\",\"width\":900,\"height\":600,\"caption\":\"Unidades CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mgdev.work\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 important CSS Units and how to use them in your responsive design\"}]},{\"@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\/5-important-css-units-responsive-design\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Mallorca Graphics\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 important CSS Units and how to use them in your responsive design - 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":"5 important CSS Units and how to use them in your responsive design - Mallorca Graphics","og_description":"Comprender c\u00f3mo utilizar eficazmente las unidades CSS es crucial a la hora de crear sitios web modernos y con capacidad de respuesta (qu\u00e9 son los sitios web con capacidad de respuesta). CSS ofrece diferentes unidades de medida para controlar el tama\u00f1o de los elementos, el espaciado y el comportamiento del dise\u00f1o. La elecci\u00f3n de la [&hellip;]","og_url":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/","og_site_name":"Mallorca Graphics","article_published_time":"2025-06-05T12:12:03+00:00","article_modified_time":"2025-11-29T19:45:40+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg","type":"image\/jpeg"}],"author":"Mallorca Graphics","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Mallorca Graphics","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/","url":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/","name":"5 important CSS Units and how to use them in your responsive design - Mallorca Graphics","isPartOf":{"@id":"https:\/\/mgdev.work\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg","datePublished":"2025-06-05T12:12:03+00:00","dateModified":"2025-11-29T19:45:40+00:00","author":{"@id":"https:\/\/mgdev.work\/es\/#\/schema\/person\/f196663fe4c37f51ed61996d7b73149f"},"breadcrumb":{"@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#primaryimage","url":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg","contentUrl":"https:\/\/mgdev.work\/wp-content\/uploads\/2025\/06\/54.jpg","width":900,"height":600,"caption":"Unidades CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/mgdev.work\/es\/5-important-css-units-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mgdev.work\/es\/"},{"@type":"ListItem","position":2,"name":"5 important CSS Units and how to use them in your responsive design"}]},{"@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\/5-important-css-units-responsive-design\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Mallorca Graphics"}]}},"_links":{"self":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513007","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=987513007"}],"version-history":[{"count":3,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513007\/revisions"}],"predecessor-version":[{"id":987514956,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/posts\/987513007\/revisions\/987514956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/media\/987514955"}],"wp:attachment":[{"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/media?parent=987513007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/categories?post=987513007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mgdev.work\/es\/wp-json\/wp\/v2\/tags?post=987513007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}