elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a la Factorización De Semiprimos (RSA)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  perdída con diseño responsive (AYUDA)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: perdída con diseño responsive (AYUDA)  (Leído 734 veces)
yina07

Desconectado Desconectado

Mensajes: 41


Ver Perfil
perdída con diseño responsive (AYUDA)
« en: 15 Enero 2019, 15:22 pm »

Saludos. estoy teniendo un problema con respecto al diseño responsive
de una web, mi problema es que no entiendo las medidas que debo utilizar para lo que realmente quiero, que es que mi pagina se adapte a todos los dispositivos, cuando digo a todos no me refiero a los mas usados, sino a todas las pantallas, para que se pueda ver bien en todos lados mi pagina, que medidas deberia especificar utilizando los media query? es que no entiendo mucho sobre medidas, podrian ayudarme? Gracias.


En línea

AngelFire

Desconectado Desconectado

Mensajes: 114


WTF :)


Ver Perfil WWW
Re: perdída con diseño responsive (AYUDA)
« Respuesta #1 en: 16 Enero 2019, 16:03 pm »

Mira aqui
https://getbootstrap.com/docs/4.2/layout/overview/
y aqui
https://getbootstrap.com/docs/4.2/layout/grid/

Código:
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Como puedes ver basado en el min-width (ancho minimo) en pixeles, bootstrap, uno de los tantos framework que existen responsive-design, clasifica en 5 categorias las pantallas de nuestros dispositivos:

Código:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

xm = extra small = muy pequeño = No media query for `xs` since this is the default in Bootstrap
sm = small = pequeño
md = medium = medio
lg = large = largo
xl = extra large = extra largo

Finalmente usando esto ya declarado en la CSS, puedes decidir que se muestra y que no ante la visita de los diferentes dispositivos que existen, de todas maneras de no especificar al ser responsive design, tomara accion lo que no siempre la deseada por el desarrollador.

Tanto chrome como firefox cuenta con Modo Desarrollador o Web Developer, ambos estandarizados bajo la tecla F12. Ahi te puede interesar todo pero relacionado a lo que preguntas existe responsive design bajo las teclas de acceso rapido Ctrl+Shift+M, por si tienes dificultad en localizarlo, donde se te permite establecer ancho y alto de la pantalla de tu equipo para luego interactuar contra la pagina que estes desarrollando.

Espero te sea de ayuda.

Saludos.

Este me parece aun mejor y esta en español.
http://www.estrellateyarde.org/manual-de-html/manual-de-html-responsive-web-design-diseno-web-adaptativo



En línea

rub'n


Desconectado Desconectado

Mensajes: 1.149


(e -> λ("live now")); tatuar -> λ("α");


Ver Perfil WWW
Re: perdída con diseño responsive (AYUDA)
« Respuesta #2 en: 16 Enero 2019, 20:09 pm »

Tirale un vistazo a flexbox  :P, soluciona muchas cosas a la hora de hacer los diseños responsive, y es candidato a ser un estandar de la W3C

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
En línea



rubn0x52.com KNOWLEDGE  SHOULD BE FREE!!!
If you don't have time to read, you don't have the time (or the tools) to write, Simple as that. Stephen King.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda x Perdida de Conexion de Vb6.0 con Vfp6.0
Programación Visual Basic
Luisin 0 756 Último mensaje 18 Febrero 2008, 00:50 am
por Luisin
Blizzard: el DRM es una batalla perdida, una pérdida de tiempo para todos
Noticias
wolfbcn 1 1,506 Último mensaje 31 Mayo 2010, 18:00 pm
por Ariath
diseño responsive
Desarrollo Web
kakashi20 3 1,284 Último mensaje 14 Abril 2014, 23:30 pm
por EFEX
[AYUDA] Landing page responsive
Desarrollo Web
Graphixx 3 1,391 Último mensaje 21 Mayo 2014, 11:18 am
por Graphixx
¿Como se puede hacer un diseño web NO responsive?
Desarrollo Web
Leguim 2 945 Último mensaje 17 Abril 2019, 23:10 pm
por iCoke
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines