Consultas de medios CSS y diseño responsivo

 

 

 

Consultas de medios css y diseno responsivo 1

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

  • allsignifica todos los medios
  • printSe utiliza para imprimir
  • screenSe utiliza cuando la página se presenta en una pantalla.
  • speechutilizado para lectores de pantalla

screenEs 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 linketiqueta 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 mediaatributo y en la @importdeclaració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 mediaatributo linkoa la @importdeclaració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 pxo remo 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 portraito 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-ratioy device-aspect-ratioacepta 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);

resolutionrepresenta 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 notpara negar una consulta de medios:

@import url(myfile.css) not screen;

Importante: notsolo 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 linketiqueta 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:

  1. Manejo de errores CSS
  2. Importar un archivo CSS usando @import
  3. Bordes CSS
  4. 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

 

Consultas de medios css y diseno responsivo 1
Consultas de medios css y diseno responsivo 1

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

 

 

Update cookies preferences