Guía del usuario Cancelar

Creación de consultas de medios

Buscar

Última actualización el 3 may 2021

Puede utilizar consultas de medios para especificar archivos CSS en función de las características de un dispositivo (diseño interactivo). El navegador de un dispositivo comprueba la consulta de medios y usa el correspondiente archivo CSS para mostrar la página web.

Por ejemplo, la siguiente consulta de medios especifica el archivo phone.css para dispositivos que tengan 300-320 píxeles de ancho.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

Para consultar una extensa introducción a consultas de medios, consulte el artículo de Don Booth en el Centro de desarrolladores de Adobe www.adobe.com/go/learn_dw_medquery_don_es.

Para obtener más información sobre consultas de medios de W3C, consulte www.w3.org/TR/css3-mediaqueries/.

Creación de una consulta de medios

En Dreamweaver, puede crear un archivo de consulta de medios para todo el sitio o una consulta de medios específica para un documento.

Archivo de consulta de medios para todo el sitio

Especifica ajustes de pantalla para todas las páginas del sitio que incluyan el archivo.

El archivo de consulta de medios para todo el sitio actúa como depósito central para todas las consultas de medios en el sitio. Después de crear este archivo, establezca vínculos con él desde páginas del sitio que deben utilizar las consultas de medios del archivo para su visualización.

Consulta de medios específica para un documento

La consulta de medios se inserta directamente en el documento y la página se muestra en función de la consulta de medios insertada.

Cree una página web.
Seleccione Modificar > Consultas de medios.
Siga uno de estos procedimientos:
- Para crear un archivo de consulta de medios para todo el sitio, seleccione Archivo de consulta de medios para todo el sitio.
- Para crear una consulta de medios específica para un documento, seleccione Este documento.
Para usar una consulta de medios para todo el sitio, haga lo siguiente:
1. Haga clic en Especificar.
2. Seleccione Crear nuevo archivo.
3. Especifique un nombre para el archivo y haga clic en Aceptar.
Es posible que algunos dispositivos no informen de su anchura real. Para forzar a los dispositivos a que informen de su anchura real, asegúrese de que la opción Forzar a los dispositivos a informar de la anchura real está activada.

El siguiente código se inserta en el archivo al elegir esta opción.
```
<meta name="viewport" content="width=device-width">
```
Siga uno de estos procedimientos:
- Haga clic en “+” para definir las propiedades para el archivo de consulta de medios.
- Haga clic en Ajustes preestablecidos por defecto si desea empezar con ajustes preestablecidos estándar.
Seleccione filas en la tabla y edite sus propiedades con las opciones situadas bajo Propiedades.

Descripción

Descripción del dispositivo para el que debe utilizarse el archivo CSS. Por ejemplo, teléfono, televisión, tableta, etc.

Anchura mín. y Anchura máx.

El archivo CSS se utiliza para dispositivos cuya anchura indicada se encuentre dentro de los valores especificados.

Nota:

Deje en blanco Anchura mín. o Anchura máx. si no desea especificar un rango explícito para un dispositivo. Por ejemplo, es habitual dejar en blanco Anchura mín. si desea establecer como destino teléfonos, que tienen una anchura igual o inferior a 320 px.

Archivo CSS

Seleccione Usar archivo existente y vaya hasta el archivo CSS para el dispositivo.

Si desea especificar un archivo CSS que todavía no ha creado, seleccione Crear nuevo archivo. Escriba el nombre del archivo CSS. El archivo se crea al pulsar Aceptar.
Haga clic en Aceptar.
Para usar una consulta de medios para todo el sitio, se crea un nuevo archivo. Guárdelo.

Consulta de medios para todo el sitio: Para páginas existentes, asegúrese de incluir el archivo de consulta de medios en todas las páginas en la etiqueta <head>.

Ejemplo de un vínculo de consulta de medios en el que mediaquery_adobedotcom.css es el archivo de consulta de medios para todo el sitio www.adobe.com/es:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Uso de un archivo de consultas de medios existente

Cree una página web o abrir una página existente.
Seleccione Modificar > Consultas de medios.
Seleccione Archivo de consultas de medios para todo el sitio.
Haga clic en Especificar.
Seleccione Usar archivo existente si ya ha creado un archivo CSS con la consulta de medios.
Haga clic en el icono examinar para ir hasta el archivo y especificarlo. Haga clic en Aceptar.
Seleccione Archivo de consultas de medios para todo el sitio.
Para forzar a los dispositivos a que informen de su anchura real, asegúrese de que la opción Forzar a los dispositivos a informar de la anchura real está activada. El siguiente código se inserta en el archivo al elegir esta opción.
```
<meta name="viewport" content="width=device-width">
```
Haga clic en Aceptar.

Elección de un archivo diferente de consultas de medios para todo el sitio

Siga este procedimiento para cambiar el archivo de consultas de medios que ha configurado en el cuadro de diálogo Consultas de medios.

Seleccione Sitio > Administrar sitios.
En el cuadro de diálogo Administrar sitios, seleccione el sitio.
Haga clic en Editar. Se muestra el cuadro de diálogo Configuración del sitio.
En Configuración avanzada, en el panel izquierdo, seleccione Datos locales.
En Archivo de consulta de medios para todo el sitio, en el panel derecho, haga clic en Examinar para seleccionar el archivo CSS de consulta de medios.

Nota:

El cambio de archivo de consulta de medios para todo el sitio no afecta a documentos vinculados a un archivo de consulta de medios para todo el sitio distinto o anterior.
Haga clic en Guardar.

Visualización de páginas web basadas en consultas de medios

Las dimensiones especificadas en una consulta de medios aparecen en las opciones para tamaño de botón/ventana multipantalla. Cuando se selecciona una dimensión del menú, aparecen los siguientes cambios:

El tamaño de la vista cambia para reflejar las dimensiones especificadas. El tamaño del marco del documento no se modifica.
El archivo CSS especificado en la consulta de medios se utiliza para mostrar la página.