Cree una página Web.
Última actualización el
27 abr. 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 obtener una introducción detallada a las consultas de medios, consulta el artículo de Don Booth en el Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Para obtener más información sobre las consultas de medios del W3C, consulta www.w3.org/TR/css3-mediaqueries/.
Creación de una consulta de medios
En Dreamweaver, puedes crear un archivo de consulta de medios para todo el sitio o una consulta de medios específica del documento.
Archivo de consulta de medios para todo el sitio
Especifica la configuración de visualización para todas las páginas del sitio que incluyen el archivo.
El archivo de consulta de medios para todo el sitio actúa como repositorio central para todas las consultas de medios del sitio.Después de crear este archivo, vincúlalo desde las páginas del sitio que deben usar las consultas de medios del archivo para su visualización.
Consulta de medios específica del documento
La consulta de medios se inserta directamente en el documento, y la página se muestra basándose en la consulta de medios insertada.
Seleccione Modificar > Consultas de medios.
Siga uno de estos procedimientos:
Para crear un archivo de consulta de medios para todo el sitio, selecciona Archivo de consultas 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:
Haga clic en Especificar.
Seleccione Crear nuevo archivo.
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 informar de su anchura real, asegúrese de que la opción Forzar dispositivos a informar de la anchura real esté habilitada.
El siguiente código se inserta en tu archivo cuando eliges esta opción.
<meta name="viewport" content="width=device-width">
Siga uno de estos procedimientos:
Haz clic en "+" para definir las propiedades del archivo de consulta de medios.
Haz clic en Ajustes preestablecidos predeterminados si quieres empezar con ajustes preestablecidos estándar.
Selecciona filas en la tabla y edita sus propiedades usando las opciones bajo Propiedades.
Descripción
La descripción del dispositivo para el que se debe usar 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
Selecciona Usar archivo existente y busca el archivo CSS para el dispositivo.
Si quieres especificar un archivo CSS que aún tienes que crear, selecciona Crear nuevo archivo.Introduzca 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 las páginas existentes, asegúrate de incluir el archivo de consulta de medios en todas las páginas en la etiqueta <head>.
Ejemplo de un enlace de consulta de medios donde mediaquery_adobedotcom.css es el archivo de consulta de medios para todo el sitio www.adobe.com:
<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.
Selecciona Usar archivo existente si ya has 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 obligar a los dispositivos a informar de su anchura real, asegúrate de que la opción Obligar a los dispositivos a informar de la anchura real esté habilitada.El siguiente código se inserta en tu archivo cuando eliges esta opción.
<meta name="viewport" content="width=device-width">
Haga clic en OK.
Elegir un archivo de consultas de medios diferente para todo el sitio
Usa este procedimiento para cambiar el archivo de consultas de medios para todo el sitio que has establecido 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, haz clic en Examinar para seleccionar el archivo CSS de consulta de medios.
Nota
Cambiar el archivo de consultas de medios para todo el sitio no afecta a los documentos vinculados a un archivo de consultas de medios para todo el sitio diferente o anterior.
Haga clic en Guardar.
Ver páginas web basadas en consultas de medios
Las dimensiones especificadas en una consulta de medios aparecen en las opciones para el tamaño de botón/ventana de Multipantalla.Cuando seleccionas una dimensión del menú, se ven 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 usa para mostrar la página.
Temas similares
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
