Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 8 vistas

    4 Demostración de Diseño Responsivo

    Cargado por

    Bairon Santos
    diseño responsivo java

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    4 Demostración de Diseño Responsivo

    Cargado por

    Bairon Santos
    8 vistas3 páginas
    diseño responsivo java

    Título original

    4 Demostración de diseño responsivo

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    diseño responsivo java

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    8 vistas3 páginas

    4 Demostración de Diseño Responsivo

    Cargado por

    Bairon Santos
    diseño responsivo java

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    Está en la página 1de 3

    Demostración de diseño responsivo:

    Para ilustrar el diseño responsivo, consideremos un ejemplo en el que

    tenemos un sitio web con una barra de navegación y un contenido

    principal. En pantallas grandes, la barra de navegación se muestra en la

    parte superior y el contenido principal ocupa el resto del espacio disponible.

    Sin embargo, en pantallas más pequeñas, como en dispositivos móviles,

    queremos que la barra de navegación se colapse en un menú desplegable

    y el contenido principal se desplace debajo.

    Aquí está el código HTML básico de la estructura del sitio:

    <div class="navbar">

    <a href="#">Inicio</a>

    <a href="#">Acerca de</a>

    <a href="#">Contacto</a>

    </div>

    <div class="content">

    <h1>Bienvenido a nuestro sitio web</h1>

    <p>Lorem ipsum dolor sit amet, consecteturadipiscing elit....</p>

    </div>
    Utilizando CSS y media que ries, podemos definir diferentes estilos para

    diferentes tamaños de pantalla:

    .navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #333;

    color: #fff;

    padding: 10px;

    .content {

    margin-top: 20px;

    padding: 20px;

    /* Media query para pantallas pequeñas */

    @media (max-width: 768px) {

    .navbar {

    flex-direction: column;

    .navbar a {
    margin-top: 10px;

    En este ejemplo, utilizamos una media que ry con un ancho máximo de768

    píxeles para aplicar un estilo diferente cuando la pantalla es más pequeña.

    En ese caso, la barra de navegación se muestra en una columna en lugar

    de una fila, y los enlaces tienen un margen superior para separarlos.

    El diseño responsivo es esencial para crear sitios web y aplicaciones que

    se adapten y respondan de manera óptima a diferentes dispositivos y

    tamaños de pantalla. Al utilizar técnicas como media que ries, unidades de

    medida relativas y sistemas de grillas, es posible lograr una experiencia de

    usuario coherente y atractiva en una variedad de dispositivos. El diseño

    responsivo no solo mejora la usabilidad y la accesibilidad, sino que también

    contribuye al rendimiento y la optimización de los sitios web. Al comprender

    y aplicar estas técnicas, los desarrolladores pueden crear interfaces de

    usuario versátiles y efectivas en el entorno web actual.

    También podría gustarte