Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Resposive mobile mode

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Arreglando los elementos con Flex para Mobile y actividad Comenzando responsive

por Estiwar Zapata Marín
| 51.7k xp | 173 posts

Buenos días a tod@s, sigueindo el curso, y entrando al modo responsivo, acabo de culminar esta aula y me surge la siguiene duda.

En el curso de HTML5 y CSS3, cuando se abordo el tema responsivo, vimos que para que el programa pudiera ser visto en dipositivos mobiles, y que para poder darle dicho modo, se requerían dos factores.

  1. la etiqueta:
    <meta name="viewport" content="width = divice-width">
  2. Los media queries
    @media screen and (max-width: 000px;){ }
    Y veo que en el flexbox al terminar esta aula, no se utilizaron estos, solo se copiaron otras lineas de código cambiando los parámetros anteriores.

Mi duda:

Para flexbox ¿no se utilizan estos dos parámetros? Si opto por realizar el cambio de parámetros ¿no me altera el modo no responsivo? es decir, el tamaño mayor a pantalla (screen) superior a 000px

Nota: tomemos el 000px como el tamaño de pantalla (screen) de referencia máxima para el modo responsivo.

Mil gracias por la atención prestada.

Saludos cordiales y apretón de mano desde Medellín - Colombia.

Data: no he realizado el ejercicio, dado que me da cosa que dañe el trabajo anterior

2 respuestas
por Ingrid Silva
| 1732.2k xp | 5587 posts
Instructor

Hola Estiwar, espero que estés muy bien.

Aprendistes que puedes utilizar media queries para crear diferentes layouts para diferentes tamaños de la pantalla e dispositibles mobiles

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadPor ejemplo ,si desea crear un layout de dos columnas para la mayoría de los tamaños de pantalla y un layout e una columna para tamaños de pantalla pequeños (como teléfonos y tabletas), puede cambiar la dirección flexible de fila a columna en un punto de interrupción específico (800 px en el ejemplo a continuación):

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

En este artículo puedes entender mejor https://www.w3schools.com/css/css3_flexbox_responsive.asp

Un saludo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Estiwar Zapata Marín
| 51.7k xp | 173 posts

Buenas tardes señorita Ingrid Silva mil gracias por tu respuesta.

Saludo cordial y apretón de mano desde Medellín - Colombia.