perdída con diseño responsive (AYUDA)

[yina07]

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.

[AngelFire]

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

Código [Seleccionar] Expandir

// 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 [Seleccionar] Expandir

// 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

[rub'n]

Tirale un vistazo a flexbox  , 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/