Guia do Usuário Cancelar

Criar consultas de mídia

Pesquisar

Última atualização em 07/05/2021

Você pode usar consultas de mídia para especificar arquivos CSS com base nas características informadas de um dispositivo (design responsivo). O navegador em um dispositivo verifica a consulta de mídia e usa o arquivo CSS correspondente para exibir a página da web.

Por exemplo, a seguinte consulta de mídia especifica o arquivo phone.css para dispositivos de 300-320 pixels.

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

Para uma obter introdução extensa às consultas de mídia, leia o artigo de Don Booth no Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_br.

Para obter mais informações sobre consultas de mídia da W3C, consulte www.w3.org/TR/css3-mediaqueries/.

Criar consulta de mídia

No Dreamweaver, você pode criar um arquivo de consulta de mídia para todo o site ou uma consulta de mídia para um documento específico.

Arquivo de consulta de mídia para todo o site

Especifica configurações de exibição de todas as páginas em seu site que incluem o arquivo.

O arquivo de consulta de mídia para todo o site age como repositório central de todas as consultas de mídia em seu site. Depois de criar o arquivo, vincule-o a páginas em seu site que precisem usar consultas de mídia para a exibição do arquivo.

Consulta de mídia para documento específico

A consulta de mídia é inserida diretamente no documento, e a página é exibida com base na consulta de mídia inserida.

Crie uma página da web.
Selecione Modificar > Consultas de mídia.
Siga um destes procedimentos:
- Para criar um arquivo de consulta de mídia para todo o site, selecione Arquivo de consultas de mídia para todo o site.
- Para criar uma consulta de mídia específica de um documento, selecione Este documento.
Para fazer uma consulta de mídia para todo o site, faça o seguinte:
1. Clique em Especificar.
2. Selecione Criar novo arquivo.
3. Especifique um nome para o arquivo e clique em OK.
É possível que alguns dispositivos não informem a largura real. Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada.

O seguinte código é inserido no arquivo quando você escolhe essa opção.
```
<meta name="viewport" content="width=device-width">
```
Siga um destes procedimentos:
- Clique em "+" para definir as propriedades do arquivo de consulta de mídia.
- Clique em Predefinições Padrão se quiser começar com predefinições padrão.
Selecione linhas na tabela e edite as respectivas propriedades usando as opções em Propriedades.

Descrição

A descrição do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televisão, mesa digitalizadora etc.

Largura mínima e máxima

O arquivo CSS é usado para dispositivos cuja largura informada está dentro dos valores especificados.

Observação:

deixe a Largura mínima ou a Largura máxima em branco se não desejar especificar um intervalo explícito para um dispositivo. Por exemplo, é comum deixar a Largura mínima em branco para telefones, cuja largura é de 320px ou menos.

Arquivo CSS

Selecione Usar arquivo existente e navegue até o arquivo CSS do dispositivo.

Se deseja especificar um arquivo CSS que ainda será criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo é criado quando você pressiona OK.
Clique em OK.
Um novo arquivo é criado para um consulta de mídia para todo o site. Salve-o.

Consulta de mídia para todo o site: Em páginas existentes, verifique se você incluiu o arquivo de consulta de mídia em todas as páginas na tag <head>.

Exemplo de um link de consulta de mídia onde mediaquery_adobedotcom.css é o arquivo de consulta de mídia para todo o site www.adobe.com/br de site:

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

Usar um arquivo de consultas de mídia existente

Crie uma página da Web ou abra uma existente.
Selecione Modificar > Consultas de mídia.
Selecione o arquivo de consultas de mídia para todo o site.
Clique em Especificar.
Selecione Usar arquivo existente se você já tiver criado um arquivo CSS com a Consulta de mídia.
Clique no ícone de busca para procurar e especifique o arquivo. Clique em OK.
Selecione o arquivo de consultas de mídia para todo o site.
Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada. O seguinte código é inserido no arquivo quando você escolhe essa opção.
```
<meta name="viewport" content="width=device-width">
```
Clique em OK.

Escolher um arquivo de consultas de mídia para todo o site diferente

Use este procedimento para alterar o arquivo de consultas de mídia para todo o site que você definiu na caixa de diálogo Consultas de mídia.

Selecione Site > Gerenciar sites.
Na caixa de diálogo Gerenciar sites, selecione o seu site.
Clique em Editar. A caixa de diálogo Configuração de site é exibida.
Em Configurações avançadas no painel esquerdo, selecione Informações locais.
No arquivo de consulta de mídia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mídia.

Observação:

a alteração do arquivo de consulta de mídia para todo o site não afeta documentos vinculados a um arquivo de consulta de mídia para todo o site diferente ou anterior.
Clique em Salvar.

Exibir páginas da Web com base em consulta de mídia

As dimensões especificadas em uma consulta de mídia aparecem nas opções de tamanho de botão/janela de várias telas. Quando você seleciona uma dimensão do menu, as seguintes modificações são vistas:

O tamanho da visualização muda para refletir as dimensões especificadas. O tamanho do quadro de documento permanece inalterado.
O arquivo CSS especificado na consulta de mídia é usado para exibir a página.