Imprimir Página - perdída con diseño responsive (AYUDA)

Mira aqui
https://getbootstrap.com/docs/4.2/layout/overview/ (https://getbootstrap.com/docs/4.2/layout/overview/)
y aqui
https://getbootstrap.com/docs/4.2/layout/grid/ (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 (http://www.estrellateyarde.org/manual-de-html/manual-de-html-responsive-web-design-diseno-web-adaptativo)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: yina07 en 15 Enero 2019, 15:22 pm