====== 6. Diseño Responsivo ====== En anteriores temas hemos visto como con ''grid'' y ''flex'' ya podíamos hacer algunas cosas que se ajustaran al tamaño de la pantalla, lo que llamamos //responsivo//. En este tema vamos a ver mas formas de hacer responsivo una página. Mas información: * [[https://kinsta.com/es/blog/diseno-de-paginas-web-sensibles/|La Guía para Principiantes del Diseño Web Responsivo (muestras de códigos y ejemplos de diseño)]] ====== Responsivo vs Adaptativo ====== Hacer un diseño responsivo es que la misma página se adapte a distintos tamaños de pantalla. Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. {{:clase:daw:diw:1eval:diseno-responsivo-vs-adaptable.png?600|}} Ejemplo de diseño adaptativo es la página de AliExpress: * [[https://es.aliexpress.com/]]: Versión para escritorio * [[https://m.es.aliexpress.com/]]: Versión para móvil. La ventaja de las webs adaptativas es que en la versión móvil solo se cargan las cosas que se necesitan para el movil además de que está hecha pensando en móvil. El inconveniente es que hay que desarrollar dos páginas. ===== viewport ===== Añadir a todas las páginas la siguiente linea en el '''' del HMTL Con esto se consigue que la página tenga el tamaño del dispositivo, ya que sino se pone , el dispositivo podría hacer que la página se haga mas grande y crear barras de desplazamiento. Mas información: * [[https://css-tricks.com/snippets/html/responsive-meta-tag/|Responsive Meta Tag]] * [[https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag|Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles]] * [[https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport|Configurar la ventana de visualización]] * [[https://github.com/alvaroadlf/HEAD/blob/master/README.md|Todo sobre la cabecera ]] ===== Unidades ===== ==== View Port ==== Podemos hacer ciertos tamaños que sean en función del tamaño de la pantalla. Para ello se usan las unidades como ''vw'' o ''vh'' que hacen referencia al tamaño de la pantalla. [[https://www.sitepoint.com/css-viewport-units-quick-start/|CSS Viewport Units: A Quick Start]] * ''vh'' Es la altura de la ventana. Un valor de 1vh es igual al 1% del alto. * ''vw'' Es el ancho de la ventana. Un valor de 1vw es igual al 1% del ancho. * ''vmin'' Mínimo entre el ancho y el alto. Es la dimensión más pequeña de la ventana. Si el alto de la ventana gráfica es menor que el ancho, el valor de 1vmin será igual al 1% de la altura. De manera similar, si el ancho es menor que la altura, el valor de 1vmin será igual al 1% del ancho. * ''vmax'' Máximo entre el ancho y el alto. Es la dimensión más grande de la ventana. Si el alto de la ventana gráfica es mayor que el ancho, el valor de 1vmin será igual al 1% de la altura. De manera similar, si el ancho es mayor que la altura, el valor de 1vmin será igual al 1% del ancho. .c-titulo { font-size: 10vw; }

Hola mundo

 En el ejemplo anterior, el tamaño de la fuente se hace mas grande a medida que se hace mas ancha la ventana. Podemos pensar que ''100vw'' es similar a ''100%'', pero hay dos diferencias [[https://stackoverflow.com/questions/25225682/difference-between-width100-and-width100vw|Difference between Width:100% and width:100vw?]]. * ''100%'' hace referencia al tamaño de donde está el elemento donde estamos , no al tamaño de la ventana. * ''100%'' no incluye el tamaño de las barras de desplazamiento , mientras que ''100vw'' si que lo hace. Para ésto último a veces se hace lo siguiente: .ejemplo { width: 100vw; height: 100vw; max-width: 100%; } * También se pueden usar decimales con ''vw'' o ''vh'' .c-titulo { font-size: 3.14vw; } ==== rem ==== La unidad ''rem'' hace referencia al tamaño de fuente del HTML. El tamaño en píxeles se obtiene de multiplicar el valor de ''rem'' por el tamaño de la fuente de la página html { font-size:12px; } ==== em ==== La unidad ''em'' hace referencia al tamaño de fuente del elemento donde está. El tamaño en píxeles se obtiene de multiplicar el valor de ''em'' por el tamaño de la fuente de ese elemento Mi recomendación es usar siempre ''px'' ya que con los modificadores responsivos y nuestro sistema de tamaños , podemos controlar como queda todo. ===== Cálculos en CSS ===== Podemos usar funciones en CSS para calcular valores. * [[https://www.mamutlove.com/blog/funciones-min-max-clamp-en-css/|Introducción a las funciones Min, Max, y Clamp de CSS]] * [[https://nowecreative.com/nowezone/funcion-calc-css/|La función calc() en CSS]] ==== min() ==== Retorna el mínimo de los dos valores. .c-titulo { font-size: min(100px,10vw); }

Hola mundo

 En el ejemplo el tamaño máximo de la fuente nunca será mayor que 100px por mucho que se haga grande la ventana. ==== max() ==== Retorna el máximo de los dos valores. .c-titulo { font-size: max(40px,10vw); }

Hola mundo

 En el ejemplo el tamaño mínimo de la fuente nunca será menor que 40px por mucho que se haga pequeña la ventana. ==== clamp() ==== Retorna un valor pero sin ser menos que un mínimo ni mayor que un máximo .c-titulo { font-size: clamp(40px,10vw,100px); }

Hola mundo

 En el ejemplo el tamaño mínimo de la fuente nunca será menos que 40px por mucho que se haga pequeña la ventana ni será mayor que 100px por mucho que se haga grande la ventana. Mas información: * [[https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/|Linearly Scale font-size with CSS clamp() Based on the Viewport]] ==== calc() ==== Permite hacer cálculos en CSS .c-titulo { font-size: calc(10vw - 10px); } .c-titulo { font-size: calc( ( 1 / 3 ) * 100vw); } .c-titulo { font-size: clamp(40px,10vw - 10px,100px); } Dentro de ''clamp'' se pueden hacer cálculos directamente sin necesidad de usar ''calc''. Es obligatorio separar siempre las operaciones de suma y resta con espacios en blanco de sus operandos. Por ejemplo, la siguiente expresión no es correcta: ''calc(50%-8px)'' debiendose corregir y quedando así: ''calc(50% - 8px)''. Aunque los operadores ''*'' y ''/'' no necesitan espacio en blanco, se sugiere agregarlos por razones de consistencia.

Hola mundo

 ==== Calculo de valores con clamp ==== La siguiente gráfica muestra como funciona ''clamp(200px,60vw,400px)''. {{ :clase:daw:diw:2eval:clamp.png |}} Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes: * $w_{lower}$: El ancho de pantalla para el valor mínimo. * $w_{upper}$: El ancho de pantalla para el valor máximo. * $min_{value}$: El valor mínimo de la propiedad CSS * $max_{value}$: El valor máximo de la propiedad CSS \\ * $pendiente$: El valor que se pone en vw. $$ pendiente=60 \\ min=200 \\ max=400 $$ \\ \\ $$ w_{lower} * \frac {pendiente}{100}=min_{value} \\ w_{lower} = \frac {min_{value}*100}{pendiente}= \frac {200*100}{60}=333px $$ \\ \\ $$ w_{upper} * \frac {pendiente}{100}=max_{value} \\ w_{upper} = \frac {max_{value}*100}{pendiente}= \frac {400*100}{60}=667px $$ De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma: {{ :clase:daw:diw:2eval:clamp_generico.png |}} Siendo los valores de $pendiente$ y $coeficiente_{posición}$ los siguientes: $$ pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100 \\ coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower} $$ Veamos el ejemplo en el que queremos que la propiedad ''font-size'' siga estas reglas: * $w_{lower}$: 230px * $w_{upper}$: 600px * $min_{value}$: 12px * $max_{value}$: 20px Entonces $$ pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2,1621622 \\ coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2,1621622}{100}*230=7,02702694 $$ Por lo tanto el css será: .c-titulo { font-size: clamp(12px,2.1621622vw + 7.02702694px,20px); } * El código en python para crear los gráficos es el siguiente: import numpy as np import matplotlib.pyplot as plt from matplotlib.ticker import AutoLocator min_value=200 max_value=400 pendiente=60 coeficiente_posición=15 #b def decore_axes(axes,title,xlabel,ylabel): axes.set_title(title, fontsize=14,pad=5,color="#000000") axes.set_xlabel(xlabel, fontsize=10,labelpad=5,color="#003B80") axes.set_ylabel(ylabel, fontsize=12,labelpad=5,color="#003B80") axes.set_xlim(xmin=0) axes.grid(visible=True, which='major', axis='both',color="#FFFFFF",linewidth=1) axes.set_axisbelow(True) axes.yaxis.set_major_locator(AutoLocator()) axes.set_facecolor('#E9F0FC') max_w_size=1200 x=np.linspace(0,max_w_size,3000) y=[] for xi in x: yi=xi*(pendiente/100)+coeficiente_posición if (yimax_value): yi=max_value y.append(yi) min_corte_x=((min_value-coeficiente_posición)*100)/pendiente max_corte_x=((max_value-coeficiente_posición)*100)/pendiente figure=plt.figure(figsize=(8,4)) axes = figure.add_subplot(1,1,1) axes.plot(x,y) axes.scatter(min_corte_x,min_value,c="red", zorder=2) axes.scatter(max_corte_x,max_value,c="red", zorder=2) decore_axes(axes,f"clamp({min_value}px,{pendiente}vw + {coeficiente_posición}px,{max_value}px)","Tamaño pantalla","Valor propiedad CSS") _=axes.set_xticks( [0,min_corte_x,max_corte_x,max_w_size]) ===== Imágenes ===== Hay muchas opciones al respecto de las imágenes responsivas. La técnica consiste principalmente en usar una imagen u otra en función de: * Ancho o alto del dispositivo * Pixel-ratio del dispositivo * Tipos soportados por el navegador. Una explicación completa la puedes ver en el siguiente enlace: [[https://jsorbit.com/responsive-images|Responsive Images]]. Aquí solo vamos a ver como carga una imagen u otra en función del ancho del dispositivo. Veamos un ejemplo: Según la resolución , no queremos cargar siempre la misma imagen sino que cambiamos la perspectiva de la foto ya que tenemos menos //sitio//. * Pantallas grandes: {{::responsive-large.jpg|}} * Pantallas medianas: {{::responsive-medium.jpg|}} * Pantallas pequeñas: {{::responsive-small.jpg|}} ===== Tablas ===== Para hacer tablas responsivas, realmente lo único que podemos hacer es que haya barras de Scroll. Para eso ponemos un div sobre la tabla con la propiedad ''overflow: auto;''

Ejemplo de tablas responsivas

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Author Title Year ISBN-13 ISBN-10
Miguel De Cervantes The Ingenious Gentleman Don Quixote of La Mancha 1605 9783125798502 3125798507
Gabrielle-Suzanne Barbot de Villeneuve La Belle et la Bête 1740 9781910880067 191088006X
Sir Isaac Newton The Method of Fluxions and Infinite Series: With Its Application to the Geometry of Curve-lines 1763 9781330454862 1330454863
Mary Shelley Frankenstein; or, The Modern Prometheus 1818 9781530278442 1530278449
Herman Melville Moby-Dick; or, The Whale 1851 9781530697908 1530697905
Emma Dorothy Eliza Nevitte Southworth The Hidden Hand 1888 9780813512969 0813512964
F. Scott Fitzgerald The Great Gatsby 1925 9780743273565 0743273567
George Orwell Nineteen Eighty-Four 1948 9780451524935 0451524934
Nnedi Okorafor Who Fears Death 2010 9780756406691 0756406692

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 Mas información: * [[https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html|Under-Engineered Responsive Tables]] * [[https://codepen.io/aardrian/pen/MWeRJWd|Under-Engineered Responsive Table Example]] ===== CSS Media Queries ===== Permiten tener un CSS distinto según el tamaño de la pantalla .c-titulo { font-size: 40px; } @media (min-width: 576px) { .c-titulo { font-size: 50px; } } @media (min-width: 768px) { .c-titulo { font-size: 55px; } } @media (min-width: 992px) { .c-titulo { font-size: 70px; } }

Hola mundo

 Como vemos para cada resolución se usa un CSS distinto y por lo tanto el tamaño es distinto según la resolución. Véase como el CSS por defecto es para tamaños menores de 576px. Es lo que se llama Mobile First Design. Es decir que por defecto el CSS es para móviles y luego ya se añade CSS para otros tamaños. En el ejemplo siguen casi los tamaños que se usan en [[https://getbootstrap.com/docs/4.5/layout/grid/#grid-options|El sistema de Grid de Bootstrap]] ===== Arquitectura responsiva ===== Pasemos ahora a ver como poder hacer las cosas responsivas con una simple arquitectura. .g--font-size-1 { font-size: 40px; } .g--font-size-2 { font-size: 50px; } .g--font-size-3 { font-size: 55px; } .g--font-size-4 { font-size: 70px; } @media (min-width: 576px) { .g--font-size-1\@tablet { font-size: 40px; } .g--font-size-2\@tablet { font-size: 50px; } .g--font-size-3\@tablet { font-size: 55px; } .g--font-size-4\@tablet { font-size: 70px; } } @media (min-width: 768px) { .g--font-size-1\@desktop { font-size: 40px; } .g--font-size-2\@desktop { font-size: 50px; } .g--font-size-3\@desktop { font-size: 55px; } .g--font-size-4\@desktop { font-size: 70px; } } @media (min-width: 992px) { .g--font-size-1\@fulldesktop { font-size: 40px; } .g--font-size-2\@fulldesktop { font-size: 50px; } .g--font-size-3\@fulldesktop { font-size: 55px; } .g--font-size-4\@fulldesktop { font-size: 70px; } }

Hola mundo

 En el ejemplo por defecto el tamaño de la fuente será de 40px pero en resoluciones mayores de 992px será de 55px. Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo ''@tablet'' , ''@desktop'' o ''@fulldesktop''. E indicando en el HTML que tamaño usar según la resolución de la pantalla. Otro ejemplo de ello lo podemos ver en [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]] También en Boostrap qu permite clases responsivas: [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]] indicando ''responsive=true'' ===== Breakpoints ===== Al crear la arquitectura responsiva es necesario indicar los pixeles de cada pantalla así como los tamaños. En los siguientes artículos se indica cuales se usan en diversos frameworks css. * [[https://dev.to/polypane/css-breakpoints-used-by-popular-css-frameworks-hl9|CSS breakpoints used by popular CSS frameworks]] * [[https://gist.github.com/ptibbetts/7b726ae20914c11eb953fdfdf3ee34ed|Comparing Breakpoints in CSS Toolkits and Frameworks]] * **Bootstrap** ^ Nombre ^ Descripcion ^ Ancho Mínimo ^ | -- | Extra small devices (portrait phones) | none | | sm | Small devices (landscape phones) | 576px | | md | Medium devices (tablet) | 768px | | lg | Large devices (desktops) | 992px | | xl | Extra large devices (large desktops) | 1200px | | xxl | Extra Extra large devices (extra large desktops) | 1400px | * **Tailwind** ^ Nombre ^ Ancho Mínimo ^ | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px | ===== Menu responsivo ===== {{..:1eval:menu.zip|}}
☰

Mi empresa

 .main-menu { display: flex; flex-direction: row; } @media (max-width: 499px) { .main-menu { position: fixed; top: 0; left: 0; } } .main-menu__hamburger { display: none; } @media (max-width: 499px) { .main-menu__hamburger { display: block; } } .main-menu__items { display: flex; flex-direction: row; } @media (max-width: 499px) { .main-menu__items { flex-direction: column; } } .main-menu__item { padding: 10px; color: #ffffff; background-color: #c0c0c0; } @media (max-width: 499px) { .main-menu__item { padding-left: 2px; background-color: #00ff00; } } @media (max-width: 499px) { .main-menu__items--movil-visible { display: block; } .main-menu__items--movil-hide { display: none; } } function toggleVisibilityMenu() { var itemsElements = document.getElementsByClassName("main-menu__items"); var hamburgerElements = document.getElementsByClassName("main-menu__hamburger"); if (itemsElements[0].className.indexOf("main-menu__items--movil-visible") >= 0) { itemsElements[0].className = " main-menu__items main-menu__items--movil-hide"; hamburgerElements[0].innerHTML = "☰"; } else { itemsElements[0].className = "main-menu__items main-menu__items--movil-visible"; hamburgerElements[0].innerHTML = "Cerrar"; } } ===== Resumen técnicas responsivas ===== Hemos visto varias formas de hacer las cosas responsivas. Veamos ahora una tabla en la que se explican las 4 formas posibles: ^ ^ Interno ^ Externo ^ ^ Fluido | El propio componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo. | El que usa el componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo. | ^ Escalonado | El propio componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla | El que usa el componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla | El tipo **Externo/Escalonado** es el mas normal y es el que usan frameworks como Tailwind o Bootstrap. * Interno/Fluido: Se suele usar con imágenes. .c-titulo { font-size: 10vw }

Hola mundo

 * Interno/Escalonado: Se usa en un menú responsivo con hamburguesa. .c-titulo { font-size: 40px; } @media (min-width: 768px) { .c-titulo { font-size: 55px; } }

Hola mundo

 * Externo/Fluido: Se usa muy poco. Author Title Year ISBN-13 ISBN-10 * Externo/Escalonado: Es el que usamos con ''@tablet'' o ''@desktop'' , etc.

Hola mundo

 ===== Ejercicios ===== ==== Ejercicio 1 ==== Crea una página HTML con lo siguiente: * 1 div cuadrado azul de tamaño 200px * 1 div cuadrado verde de tamaño 200px * 1 div cuadrado azul de tamaño 400px * 1 div cuadrado verde de tamaño 400px * Dentro cada cuadrado azul , añade otro div de color rojo con tamaño 20% * Dentro cada cuadrado verde , añade otro div de color rojo con tamaño 20vw Ahora: * Explica la diferencia de tamaños entre los de 20% y 20vw * Ahora cambia el tamaño de la página y mira como de modifica el tamaño de los cuadrados. Indica cuales han cambiado de tamaño y explica porqué han cambiado de tamaño ==== Ejercicio 2 ==== Crea una página HTML con lo siguiente: * 3 divs cuadrados de 200 pixeles de lado cada uno, de colores * Rojo * Verde * Azul (Que tenga Tamaño de fuente 20px) De forma que: * Que el cuadrado Rojo se indique su tamaño usando ''px'' * Que el cuadrado Verde se indique su tamaño usando ''rem'' * Que el cuadrado Azul se indique su tamaño usando ''em'' Añade ahora el siguiente CSS: html { font-size:24px; } Y comprueba que solo se ha modificado el tamaño del cuadrado Verde. ==== Ejercicio 3 ==== Crea una página HTML con lo siguiente: * Un div cuadrado de color rojo de forma que como mínimo tenga 100px pero a medida que el ancho de la pantalla se hace mas grande , se hagan también mas grande el cuadrado. * Un div cuadrado de color verde de forma que como máximo tenga 800px pero a medida que el ancho de la pantalla se hace mas pequeña, se hagan también mas pequeño el cuadrado. * Un div cuadrado de color azul de forma que como máximo tenga 800px, de tamaño mínimo tenga 100px, pero a medida que el ancho de la pantalla se hace mas pequeña, se hagan también mas pequeño el cuadrado y si se hace mas grande el ancho de la pantalla, también se haga mas grande el cuadrado. * Un div cuadrado de color rosa de forma que su tamaño siempre sea la mitad de la pantalla mas 20px * Un div cuadrado de color amarillo de forma que su tamaño siempre sea la mitad de la pantalla mas 20px pero no pueda ser menor que 100px ni mayor que 600px ==== Ejercicio 4 ==== Haz una página HTML de forma que se cargue una imagen distinta según el siguiente ancho de la pantalla: * menos de 500px * entre 500px y 1000px * mas de 1000px ==== Ejercicio 5 ==== Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM ==== Ejercicio 6 ==== Crea una clase css llamada ''.g--color-fondo-responsivo'' de forma que cambia el color de fondo si el ancho del dispositivo (o ventana) tiene: * Menos de 500px sea de color rojo * Entre 500px y 750px sea de color verde * Entre 750px y 1000px sea de color azul * Más de 1000px sea de color naranja Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px ==== Ejercicio 7 ==== Crea las siguientes clases css: .g--bg-color-red { background-color:#FF0000; } .g--bg-color-green { background-color:#00FF00; } .g--bg-color-blue { background-color:#0000FF; } .g--bg-color-orange { background-color:#FFA500; } Y modificalas con el sufijo "@tabled", "@desktop" y "@fulldesktop" y repite el ejercicio anterior pero en vez de usar la clase ''.g--color-fondo-responsivo'' uses las clases que acabas de crear ==== Ejercicio 8 ==== Crea modificadores globales para las siguientes propiedades CSS: * ''width'' * ''min-width'' * ''max-width'' Los posibles valores de cada uno de ellos serán: 100px, 150px , 200px, 250px, 300px, 350px, 400px, 450px, 500px, 550px, 600px Crea también otro modificador global para ''overflow: auto;'' Crea una clase BEM para tablas HTML de forma que: * La tabla tendrá alrededor un borde y un sombreado * Las cabeceras de la tabla serán de otro color. Con todo los anterior, haz una página HTML con una tabla en la que: * Haya columnas que tengan un ancho mínimo y otro máximo * Haya columnas que tengan un ancho fijo * Haya una columna que tengan un ancho mínimo * Que si la tabla no cabe, aparezcan las barras de scroll. ==== Ejercicio 9 ==== Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con * @tablet * @desktop * @fulldesktop Modifica el ejemplo de la tabla HTML de forma que las columnas ahora tenga siempre tamaños fijos (es decir no usar min o max), pero que cambien según la resolución de la pantalla. ==== Ejercicio 10 ==== Usando las clases de BEM y los modificadores globales que has ido usando durante el curso, añade de forma que ahora se puedan usar de forma responsiva con * @tablet * @desktop * @fulldesktop ==== Ejercicio 11 ==== Modifica la página del tema anterior para hacerla responsiva de forma que según la resolución se cambie el tamaño : * El tamaño de los títulos * Los padding * Los margins * Los menús sean responsivos. Es decir que cuando la pantalla es pequeña, se muestre la "hamburguesa" * Se oculten imágenes en tamaños pequeños.