{"id":215,"date":"2024-05-21T09:51:30","date_gmt":"2024-05-21T07:51:30","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=215"},"modified":"2024-05-21T09:51:30","modified_gmt":"2024-05-21T07:51:30","slug":"43-diseno-web-responsive","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/43-diseno-web-responsive\/","title":{"rendered":"43. Dise\u00f1o Web Responsive"},"content":{"rendered":"\n

El dise\u00f1o web Responsive<\/strong> trata de crear p\u00e1ginas web que se vean bien en todos los dispositivos. Un dise\u00f1o web Responsive<\/strong> se ajustar\u00e1 autom\u00e1ticamente a diferentes tama\u00f1os de pantalla y ventanas gr\u00e1ficas.<\/p>\n\n\n\n

Que es un dise\u00f1o web Responsive?<\/h2>\n\n\n\n

El dise\u00f1o web Responsive<\/strong> se trata de usar HTML y CSS para cambiar el tama\u00f1o, ocultar, reducir o ampliar autom\u00e1ticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y tel\u00e9fonos).<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n* {\nbox-sizing: border-box;\n}\n.menu {\nfloat: left;\nwidth: 20%;\n}\n.menuitem {\npadding: 8px;\nmargin-top: 7px;\nborder-bottom: 1px solid #f1f1f1;\n}\n.main {\nfloat: left;\nwidth: 60%;\npadding: 0 20px;\noverflow: hidden;\n}\n.right {\nbackground-color: lightblue;\nfloat: left;\nwidth: 20%;\npadding: 10px 15px;\nmargin-top: 7px;\n}\n\n@media only screen and (max-width:800px) {\n\/* For tablets: *\/\n.main {\nwidth: 80%;\npadding: 0;\n}\n.right {\nwidth: 100%;\n}\n}\n@media only screen and (max-width:500px) {\n\/* For mobile phones: *\/\n.menu, .main, .right {\nwidth: 100%;\n}\n}\n<\/style>\n<\/head>\n<body style=\"font-family:Verdana;\">\n\n<div style=\"background-color:#f1f1f1;padding:15px;\">\n<h1>Cinque Terre<\/h1>\n<h3>Resize the browser window<\/h3>\n<\/div>\n\n<div style=\"overflow:auto\">\n<div class=\"menu\">\n<div class=\"menuitem\">The Walk<\/div>\n<div class=\"menuitem\">Transport<\/div>\n<div class=\"menuitem\">History<\/div>\n<div class=\"menuitem\">Gallery<\/div>\n<\/div>\n\n<div class=\"main\">\n<h2>The Walk<\/h2>\n<p>The walk from Monterosso to Riomaggiore will take you approximately\n two hours, give or take an hour depending on the weather conditions\n and your physical shape.<\/p>\n<img src=\"img_5terre.jpg\" style=\"width:100%\">\n<\/div>\n\n<div class=\"right\">\n<h2>What?<\/h2>\n<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia,\n Manarola, and Riomaggiore.<\/p>\n<h2>Where?<\/h2>\n<p>On the northwest cost of the Italian Riviera, north of the city \nLa Spezia.<\/p>\n<h2>Price?<\/h2>\n<p>The Walk is free!<\/p>\n<\/div>\n<\/div>\n\n<div style=\"background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;\">\n This web page is a part of a demonstration of fluid web \ndesign made by w3schools.com. Resize the browser window to \nsee the content respond to the resizing.<\/div>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Configuraci\u00f3n de la ventana gr\u00e1fica (Viewport)<\/h2>\n\n\n\n
Para crear un sitio web Reponsive<\/strong>, agrega la siguiente etiqueta <meta><\/em><\/strong> a todas tus p\u00e1ginas web:<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n\n\n\n
Esto configurar\u00e1 la ventana gr\u00e1fica de tu p\u00e1gina, que le dar\u00e1 al navegador instrucciones sobre c\u00f3mo controlar las dimensiones y la escala de la p\u00e1gina.<\/p>\n\n\n\n
Este es un ejemplo de una p\u00e1gina web sin la metaetiqueta de ventana gr\u00e1fica y la misma p\u00e1gina web con la metaetiqueta de ventana gr\u00e1fica:<\/p>\n\n\n\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n\n\n\n
\n
Sugerencia<\/strong>: si est\u00e1s navegando por esta p\u00e1gina en un tel\u00e9fono o tableta, puedes hacer clic en los dos enlaces de arriba para ver la diferencia.<\/p>\n<\/blockquote>\n\n\n\n
Imagenes Responsive<\/h2>\n\n\n\n
Las im\u00e1genes Responsive<\/strong> son im\u00e1genes que se escalan muy bien para adaptarse a cualquier tama\u00f1o de navegador.<\/p>\n\n\n\n
Usando la propiedad width<\/h3>\n\n\n\n
Si la propiedad CSS se establece en 100%, la imagen responder\u00e1 y se escalar\u00e1 hacia arriba y hacia abajo.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<img src=\"img_girl.jpg\" style=\"width:100%;\"<\/strong>><\/pre>\n\n\n\n
Ten en cuenta que en el ejemplo anterior, la imagen se puede ampliar para que sea m\u00e1s grande que su tama\u00f1o original. Una mejor soluci\u00f3n, en muchos casos, ser\u00e1 usar la propiedad max-width en su lugar.<\/p>\n\n\n\n
Usando la propiedad max-width<\/h2>\n\n\n\n
Si la propiedad max-width<\/em><\/strong> se establece en 100%, la imagen se reducir\u00e1 si es necesario, pero nunca se escalar\u00e1 para ser m\u00e1s grande que su tama\u00f1o original:<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<img src=\"img_girl.jpg\" style=\"max-width:100%;<\/strong>height:auto;\"><\/pre>\n\n\n\n
Mostrar diferentes im\u00e1genes dependiendo del navegador<\/h2>\n\n\n\n
El elemento HTML <picture><\/em><\/strong> te permite definir diferentes im\u00e1genes para diferentes tama\u00f1os de ventana del navegador. Cambia el tama\u00f1o de la ventana del navegador para ver c\u00f3mo cambia la imagen de abajo dependiendo del ancho.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<picture>\n  <source srcset=\"img_smallflower.jpg\" media=\"(max-width: 600px)\">\n  <source srcset=\"img_flowers.jpg\" media=\"(max-width: 1500px)\">\n  <source srcset=\"flowers.jpg\">\n  <img src=\"img_smallflower.jpg\" alt=\"Flowers\">\n<\/picture><\/pre>\n\n\n\n
Tama\u00f1o de texto Responsive<\/h2>\n\n\n\n
El tama\u00f1o del texto se puede configurar con una unidad \u00abvw\u00bb, lo que significa el \u00abancho de la ventana gr\u00e1fica\u00bb. De esa forma, el tama\u00f1o del texto seguir\u00e1 el tama\u00f1o de la ventana del navegador.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<h1 style=\"font-size:10vw<\/strong>\">Hello World<\/h1><\/pre>\n\n\n\n
Viewport es el tama\u00f1o de la ventana del navegador. 1vw = 1% del ancho de la ventana gr\u00e1fica. Si la ventana gr\u00e1fica tiene 50 cm de ancho, 1vw es 0,5 cm.<\/p>\n\n\n\n
Media Queries<\/h2>\n\n\n\n
Adem\u00e1s de cambiar el tama\u00f1o de texto e im\u00e1genes, tambi\u00e9n es com\u00fan usar consultas de medios en p\u00e1ginas web Responsive<\/strong>. Con las consultas de medios, puedes definir estilos completamente diferentes para diferentes tama\u00f1os de navegador. Ejemplo: cambia el tama\u00f1o de la ventana del navegador para ver que los tres elementos div<\/em> <\/strong>a continuaci\u00f3n se mostrar\u00e1n horizontalmente en pantallas grandes.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n* {\nbox-sizing: border-box;\n}\n\n.left {\nbackground-color: #2196F3;\npadding: 20px;\nfloat: left;\nwidth: 20%; \/* The width is 20%, by default *\/\n}\n\n.main {\nbackground-color: #f1f1f1;\npadding: 20px;\nfloat: left;\nwidth: 60%; \/* The width is 60%, by default *\/\n}\n\n.right {\nbackground-color: #04AA6D;\npadding: 20px;\nfloat: left;\nwidth: 20%; \/* The width is 20%, by default *\/\n}\n\n\/* Use a media query to add a break point at 800px: *\/\n@media screen and (max-width: 800px) {\n.left, .main, .right {\nwidth: 100%; \/* The width is 100%, when the viewport is 800px or smaller *\/\n}\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Media Queries<\/h2>\n<p>Resize the browser window.<\/p>\n\n<p>Make sure you reach the breakpoint at 800px when resizing this frame.<\/p>\n\n<div class=\"left\">\n<p>Left Menu<\/p>\n<\/div>\n\n<div class=\"main\">\n<p>Main Content<\/p>\n<\/div>\n\n<div class=\"right\">\n<p>Right Content<\/p>\n<\/div>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
P\u00e1gina web Responsive – Dise\u00f1o completo<\/h2>\n\n\n\n
Una p\u00e1gina web Responsive<\/strong> debe verse bien en pantallas de escritorio grandes y en tel\u00e9fonos m\u00f3viles peque\u00f1os.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n* {\nbox-sizing: border-box;\n}\n\n.menu {\nfloat: left;\nwidth: 20%;\ntext-align: center;\n}\n\n.menu a {\nbackground-color: #e5e5e5;\npadding: 8px;\nmargin-top: 7px;\ndisplay: block;\nwidth: 100%;\ncolor: black;\n}\n\n.main {\nfloat: left;\nwidth: 60%;\npadding: 0 20px;\n}\n\n.right {\nbackground-color: #e5e5e5;\nfloat: left;\nwidth: 20%;\npadding: 15px;\nmargin-top: 7px;\ntext-align: center;\n}\n\n@media only screen and (max-width: 620px) {\n\/* For mobile phones: *\/\n.menu, .main, .right {\nwidth: 100%;\n}\n}\n<\/style>\n<\/head>\n<body style=\"font-family:Verdana;color:#aaaaaa;\">\n\n<div style=\"background-color:#e5e5e5;padding:15px;text-align:center;\">\n<h1>Hello World<\/h1>\n<\/div>\n\n<div style=\"overflow:auto\">\n<div class=\"menu\">\n<a href=\"#\">Link 1<\/a>\n<a href=\"#\">Link 2<\/a>\n<a href=\"#\">Link 3<\/a>\n<a href=\"#\">Link 4<\/a>\n<\/div>\n\n<div class=\"main\">\n<h2>Lorum Ipsum<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n<\/div>\n\n<div class=\"right\">\n<h2>About<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<\/p>\n<\/div>\n<\/div>\n\n<div style=\"background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;\">\n\u00a9 copyright w3schools.com<\/div>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
El dise\u00f1o web Responsive trata de crear p\u00e1ginas web que se vean bien en todos los dispositivos. Un dise\u00f1o web Responsive se…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":42,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"El dise\u00f1o web Responsive trata de crear p\u00e1ginas web que se vean bien en todos los dispositivos. Un dise\u00f1o web Responsive se...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions\/217"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}