Esta publicación mencionará las pautas necesarias para implementar consultas de medios.
¿Cómo implementar Media Queries para dispositivos móviles?
La consulta de medios se puede aplicar a dispositivos móviles simplemente mencionando el ' @medios de comunicación ”Etiqueta y especificando el tamaño de la pantalla entre llaves pequeñas. El CSS para esa consulta de medios luego se puede agregar dentro de las llaves. Siempre que el tamaño de la pantalla cumpla con el tamaño especificado por el usuario, aplicará la consulta de medios indicada.
Repasemos un ejemplo práctico para aprender la implementación de media queries para dispositivos móviles.
Ejemplo: crear un diseño que cambie de un diseño de dos columnas a un diseño de una columna aplicando consultas de medios
En el siguiente ejemplo, el diseño de la página web cambiará de un diseño de columna a un diseño de una sola columna:
Paso 1: crear una estructura HTML
- Primero, cree un archivo HTML y vincule el archivo de hoja de estilo CSS externo en su
sección. - Luego, crea un
sección y agregue el encabezado del sitio web usando el etiqueta. - Crear un por el nombre de clase de “container-class” y dosmás dentro tiene el nombre de clase de “ columna ”. < cuerpo >
< h1 > Sugerencia de Linux < / h1 >
< / encabezado>
< div clase = 'clase contenedor' >
< div clase = 'columna' >
< h2 > Seccion uno < / h2 >
< pag > Linux Hint es una de las mejores plataformas de aprendizaje electrónico. < / pag >
< / div >
< div clase = 'columna' >
< h2 > Sección dos < / h2 >
< pag > Linux Hint es una de las mejores plataformas de aprendizaje electrónico. < / pag >
< / div >
< / div >
< / cuerpo >Paso 2: aplicar CSS
En la sección del cuerpo:- Primero, especifique la sección del cuerpo escribiendo “ cuerpo ”Etiqueta y menciona las llaves.
- Dentro de las llaves, especifique la familia de fuentes, el color de fondo, el margen y el relleno.
Sobre el
sección:
- Especifique el color del texto, la alineación del texto, el color de fondo y el relleno.
Sobre el “clase contenedor” div:
- Selecciona el ' mostrar ” valor de la propiedad a “ doblar ”para crear el Flexbox.
- Utilizar el ' justificar-contenido ”para agregar espacio entre el contenido y agregar relleno.
En clase de columna:
- Primero, especifique el valor indicado en el campo ' doblar ”Propiedad para agregar un espacio entre las dos secciones de diseño.
- Después de eso, agregue el color de fondo, el borde, el relleno y el tamaño del cuadro.
Paso 3: Aplicar consulta de medios
- Para aplicar la consulta de medios para dispositivos móviles, primero agregue el ' @medios de comunicación ' etiqueta.
- Luego, especifique el valor “ 768px ' que es típico de los dispositivos móviles al ' anchura máxima ”propiedad dentro de las llaves pequeñas.
- Después de eso, especifique el ' columna ” valor al “ dirección flexible ” propiedad que se aplicará a la “ clase de contenedor”. Esto cambiará las dos columnas en una sola cada vez que se detecte el tamaño de pantalla especificado.
- Por último, aplique CSS en el ' columna 'clase y especifique' margen ' y ' doblar ' valores:
familia de fuentes: sans-serif;
fondo- color : plata;
margen: 0 ;
relleno: 0 ;
}
encabezamiento {
fondo- color : #2f4f4f;
relleno: 20px;
texto- alinear : centro;
color : blanco;
}
.envase- clase {
pantalla: flexible;
justificar- contenido : espacio entre;
relleno: 20px;
}
.columna {
doblar: 0 1 cálculo ( 50 % - 10px ) ;
borde : 1px verde sólido;
fondo- color : blanco;
tamaño de caja: cuadro de borde;
relleno: 20px;
}
@ medios de comunicación ( max- ancho : 768px ) {
.envase- clase {
dirección flexible: columna;
}
.columna {
doblar: 0 1 100 %;
margen inferior: 20px;
}
}Producción
Aquí está el resultado de la página web después de aplicar la consulta de medios. Esta salida es un diseño responsivo de dos columnas:
Siempre que la pantalla cumple con las dimensiones especificadas mediante una consulta de medios para dispositivos móviles, se convierte en un diseño de una columna:
Conclusión
Para implementar consultas de medios para dispositivos móviles, primero incluya el ' ventana gráfica ' en el ' cabeza ' sección. Luego, escribe CSS específico para el diseño móvil. Después de eso, agregue la consulta de medios usando la etiqueta '@media' y especificando el tamaño de la pantalla del móvil. Por ejemplo, especifique 768 px para tabletas y 480 px para teléfonos móviles. Este artículo ha explicado el procedimiento para implementar consultas de medios para dispositivos móviles.