Scribd
Cargar
4 vistas1 página

Guía de Diseño Web Responsivo

El diseño responsivo es esencial para que los sitios web se vean bien en diferentes dispositivos con variados tamaños de pantalla. Se utilizan media queries en CSS para aplicar estilos específicos en breakpoints definidos, con medidas estándar para computadoras, tablets y celulares. Se recomienda desarrollar primero para el dispositivo más grande o más pequeño, utilizando max-width o min-width según la estrategia elegida.

Cargado por

angel
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
4 vistas1 página

Guía de Diseño Web Responsivo

El diseño responsivo es esencial para que los sitios web se vean bien en diferentes dispositivos con variados tamaños de pantalla. Se utilizan media queries en CSS para aplicar estilos específicos en breakpoints definidos, con medidas estándar para computadoras, tablets y celulares. Se recomienda desarrollar primero para el dispositivo más grande o más pequeño, utilizando max-width o min-width según la estrategia elegida.

Cargado por

angel
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Responsive Desing

Hoy en dia los sitios tiene que poder verse en distintos

dispositivos, los cuales cuentan con distintos tamaños de

pantalla.

Para poder adaptar el estilo de nuestro sitio a estos

dispositivos contamos con los media query que los vamos a

usar en distintos breakpoints

Responsive Desing

Breakpoint Punto (ancho de pantalla) donde el diseño va a

cambiar

Media Query Declaracion que escribimos en CSS donde vamos a

indicar que modificaciones vamos a realizar en el

estilo cuando la pantalla tenga un cierto tamaño .

Responsive Desing

Medidas estandares

Computadoras 990px - 1200 px aprox

768px - 800px
Tablets

Celular 320 px - 400px

Responsive Desing

Media Query : ¿Como se escriben?

Indicamos el @media y entre parentecis el breakpoint

Dentro colocamos los estilos


que van a cambiar

Responsive Desing

Media Query : ¿Como se escriben?

max- width Quiere decir cuando el ancho de pantalla sea como


maximo de ...

min- width Quiere decir cuando el anchode pantalla sea como


nimino de ...

Responsive Desing

min- width .. max-width... ¿Cual uso?

Para saber cual de los dos usar primero pensemos por donde vamos a

arrancar :

> Pensando nuestro sitio para una computadora y luego adaptarla a

dispositivos mas c hicos.

> Pensando nuestro sitio para un celular y luego adaptarla a dispositivos

mas grande.

Responsive Desing

Para una computadora Primero

Desarrolla el sitio para pc .

2. @media para dispositivos


Hace un

mas chicos con un maximo de ancho

principalmente (max-width)

Responsive Desing

Para un celular Primero (Mobile First)

Desarrolla el sitio para celulares(mobile).

2. Hace un @media para dispositivos


mas grandes con un minimo de ancho

principalmente (min-width)

Responsive Desing

ACLARACIONES !!

Dentro de los @media solo se ponen las excepciones,no hace falta


repetir el codigo CSS.

Se puede pezclar el uso de max-width y min-width pero se


recomienda usar solo una de ellas .

También podría gustarte