Las consultas de medios pueden mostrar diferentes estilos para diferentes tamaños de pantalla.
Esta es una nueva característica de CSS3.
Sintaxis
ps: escrito en estilo
@media mediatype and|not|only (media feature){
/*css代码*/
}
Parámetros detallados:
-
tipo de medio es el tipo de medio, que se puede escribir como cualquiera de los siguientes
- todo significa todos los dispositivos
- imprimir significa impresora y vista previa de impresión
- pantalla de la computadora, tableta, teléfono móvil, el más utilizado
-
y | no | solo significa: y | no | un específico
-
(función multimedia): debe estar entre paréntesis, es decir, funciones multimedia
- ancho ancho visible
- ancho mínimo ancho mínimo visible
- ancho máximo ancho visible máximo
Ejemplos
@media screen and (min-width:320px){
html{
font-size:50px
}
}
La forma de introducir recursos desde el exterior:
ps: escrito en la cabeza, fuera del estilo, los parámetros son similares a los anteriores y no se especifican
<link rel="stylesheet" href="xxx.css" media="screen and (min-width:320px)">
Se recomienda usarlo junto con rem para lograr el cambio general, ya que rem se cambia de acuerdo con el tamaño de fuente en HTML, y el tamaño de fuente se modifica mediante consultas de medios para modificar el tamaño general.
