Cómo trabajar con consultas de medios en CSS para crear páginas web responsivas
En esta publicación, primero presentará los tipos de medios y los descriptores de características de los medios, luego explicaré las consultas de medios.
Tipos de medios
Los tipos de medios se utilizan en consultas de medios y declaraciones @import y nos permiten determinar en qué medio se carga un archivo CSS o un fragmento de CSS.
Disponemos de los siguientes tipos de medios
all
significa todos los mediosprint
Se utiliza para imprimirscreen
Se utiliza cuando la página se presenta en una pantalla.speech
utilizado para lectores de pantalla
screen
Es el valor predeterminado.
En el pasado teníamos más de ellos, pero la mayoría están en desuso porque se ha demostrado que no son una forma efectiva de determinar las necesidades del dispositivo.
Podemos usarlos en declaraciones @import como esta:
@import url(myfile.css) screen;@import url(myfile-print.css) print;
Podemos cargar un archivo CSS en múltiples tipos de medios separando cada uno con una coma:
@import url(myfile.css) screen, print;
Lo mismo funciona para la link
etiqueta en HTML:
link rel="stylesheet" type="text/css" href="myfile.css" media="screen" /link rel="stylesheet" type="text/css" href="another.css" media="screen, print" /
No nos limitamos a utilizar únicamente tipos de medios en el media
atributo y en la @import
declaración. Hay más
Descriptores de funciones de los medios
Primero, vamos a presentar los descriptores de características de los medios . Son palabras claves adicionales que podemos agregar al media
atributo link
oa la @import
declaración para expresar más condiciones sobre la carga del CSS.
Aquí está la lista de ellos:
width
height
device-width
device-height
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
orientation
scan
grid
Cada uno de ellos tiene un min-* y un max-* correspondiente, por ejemplo:
min-width
,max-width
min-device-width
,max-device-width
etcétera.
Algunos de ellos aceptan un valor de longitud que puede expresarse en px
o rem
o cualquier valor de longitud. Es el caso de width
, height
, device-width
, device-height
. Fotos Porno y actrices porno
Por ejemplo:
@import url(myfile.css) screen and (max-width: 800px);
Tenga en cuenta que envolvemos cada bloque utilizando descriptores de características multimedia entre paréntesis.
Algunos aceptan un valor fijo. orientation
, utilizado para detectar la orientación del dispositivo, acepta portrait
o landscape
.
Ejemplo:
link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" /
scan
, se utiliza para determinar el tipo de pantalla, acepta progressive
(para pantallas modernas) o interlace
(para dispositivos CRT más antiguos)
Otros quieren un número entero.
Como, por ejemplo color
, que inspeccione la cantidad de bits por componente de color que utiliza el dispositivo. Es de nivel muy bajo, pero solo necesitas saber que está ahí para tu uso (como grid
, color-index
, monochrome
).
aspect-ratio
y device-aspect-ratio
acepta un valor de relación que representa la relación entre el ancho y la altura de la ventana gráfica, que se expresa como una fracción.
Ejemplo:
@import url(myfile.css) screen and (aspect-ratio: 4/3);
resolution
representa la densidad de píxeles del dispositivo, expresada en un tipo de datos de resolución como dpi
.
Ejemplo:
@import url(myfile.css) screen and (min-resolution: 100dpi);
Operadores lógicos
Podemos combinar reglas usando and
:
link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" /
Podemos realizar una operación lógica de tipo “o” utilizando comas, que combina múltiples consultas de medios:
@import url(myfile.css) screen, print;
Podemos utilizar not
para negar una consulta de medios:
@import url(myfile.css) not screen;
Importante: not
solo se puede utilizar para negar una consulta de medios completa, por lo que debe colocarse al principio de la misma (o después de una coma)
Consultas de medios
Todas las reglas anteriores que vimos aplicadas a @import oa la link
etiqueta HTML también se pueden aplicar dentro del CSS.
Es necesario envolverlos en una @media () {}
estructura.
Ejemplo:
@media screen and (max-width: 800px) { /* enter some CSS */}
Y esta es la base del diseño responsivo .
Las consultas de medios pueden ser bastante complejas. Este ejemplo aplica el CSS solo si se trata de un dispositivo de pantalla, el ancho está entre 600 y 800 píxeles y la orientación es horizontal:
@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) { /* enter some CSS */}
Tips de CSS
Tal vez te puede interesar:
- Manejo de errores CSS
- Importar un archivo CSS usando @import
- Bordes CSS
- La propiedad flotante CSS y su limpieza
Consultas de medios CSS y diseño responsivo
Cómo trabajar con consultas de medios en CSS para crear páginas web responsivas Tipos de mediosDescriptores de funciones de los mediosOperadores lógicosCo
programar
es
https://aprendeprogramando.es/static/images/programar-consultas-de-medios-css-y-diseno-responsivo-1995-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente