Guia do Usuário Cancelar

Criar e usar consultas de mídia no Dreamweaver

Pesquisar

Última atualização em 13 de fev de 2023

Use as Consultas de mídia visual para exibir e editar suas páginas da Web em diferentes pontos de interrupção que correspondem a diferentes tamanhos de tela.

As consultas de mídia são um módulo do CSS3 que ajuda a criar sites responsivos por meio da definição de diferentes regras de estilo para diferentes dispositivos ou tipos de mídia. Com base nessas regras, o conteúdo é renderizado para se adaptar a várias condições, como tamanhos de tela, tamanhos de janela do navegador, tamanhos e orientação de dispositivos e resolução.

É possível adicionar consultas de mídia usando a regra @media para seu CSS. Ou você pode criar folhas de estilo separadas para diferentes tipos de mídia e invocá-las usando esta sintaxe:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

O navegador em um dispositivo verifica a consulta de mídia e usa o arquivo CSS correspondente para exibir a página da Web.

Para obter mais informações, consulte este artigo.

Você pode adicionar as consultas de mídia acrescentando o código relevante a seus arquivos HTML ou CSS. Além disso, o Dreamweaver permite criar e gerenciar consultas de mídia facilmente usando:

A diferença básica entre esses métodos é o aspecto visual. Se você optar por codificar e exibir as alterações na Visualização dinâmica, use o CSS Designer. Se preferir exibir sua página em diferentes pontos de interrupção e, ao mesmo tempo, fazer alterações de design, a consulta de mídia visual é a melhor alternativa.

Barras de consulta de mídia visual

As barras de Consulta de mídia visual são uma representação visual das consultas de mídia presentes em uma página. Essas barras ajudam a exibir a página da Web em diferentes pontos de quebra e a exibir como os diferentes componentes de sua página se reajustam em diferentes visores. Enquanto exibe a página em visores distintos, você pode fazer alterações de design específicas para um visor sem afetar o design da página em outros visores.

A consulta de mídia visual consiste em três barras como linhas horizontais, cada uma representando uma categoria de consulta de mídia:

Verde: consultas de mídia com condições de max-width
Azul: consultas de mídia com condições de min-width e max-width
Roxo: consultas de mídia com condições de min-width

Observação:

as consultas de mídia listadas no painel CSS Designer também são prefixadas com essas cores.

Cada categoria pode consistir em uma ou mais consultas de mídia. Se uma condição de consulta de mídia não estiver definida no documento, a barra de consulta de mídia visual correspondente também não será exibida. Por exemplo, se o documento não contiver condições de min-width, a barra roxa não será exibida.

Os valores de ponto de interrupção são indicados nas barras: min-width à esquerda e max-width à direita da barra.

A. Pontos de interrupção B. Barras de consulta de mídia visual C. Ícone Adicionar consulta de mídia D. Scrubber

Ocultar ou mostrar consultas de mídia visual

A barra de consultas de mídia visual é visível na Visualização dinâmica por padrão. Para ocultar a barra, use Alternar barra de consulta de mídia visual na barra de ferramentas.

Alternar entre pontos de interrupção

Para exibir a página em um tamanho específico (ponto de interrupção), clique na barra de consulta de mídia correspondente. O documento vai se ajustar ao ponto de interrupção.

Como alternativa, é possível arrastar o scrubber até o ponto de interrupção necessário.

Para redimensionar a exibição para o tamanho da janela do documento do Dreamweaver, realize uma das seguintes ações:

Clique duas vezes em qualquer parte da área cinza à direita onde é exibido o texto “Clique duas vezes para ajustar a largura”. Se a área cinza não for exibida, arraste o scrubber para a esquerda.
Selecione a opção Largura total na lista suspensa na parte inferior da janela do documento.

Se não vir essa opção, arraste o scrubber para diminuir o tamanho da página da Web.

Editar consultas de mídia visualmente

Clique na barra de consulta de mídia visual correspondente à consulta de mídia que deseja editar.

São exibidas alças de redimensionamento. Para consultas de mídia que apresentam valores min e max-width, alças de redimensionamento são exibidas em ambos os lados da barra.

Alças de redimensionamento
Arraste as alças até o tamanho necessário.

As consultas de mídia são automaticamente atualizadas com os valores min-width e/ou max-width. Uma notificação é exibida para indicar que a consulta de mídia foi editada com sucesso. Se houver várias consultas de mídia que correspondam à barra de consulta de mídia visual, todas as consultas de mídia serão atualizadas. O número de consultas de mídia que foram atualizadas é exibido juntamente com a mensagem de êxito.

Observação:

para desfazer, pressione Ctrl+Z (Win) ou Cmd+Z (Mac).

Como alternativa, você pode clicar duas vezes nos valores de ponto de interrupção para digitar os valores usando o teclado.

Adicionar novas consultas de mídia

Arraste o scrubber com a régua até o tamanho necessário.
Clique em .

Adição de consultas de mídia
No pop-up que é exibido, a opção max-width está selecionada por padrão. Para especificar min-width ou max-width, selecione a opção adequada na lista suspensa e selecione as unidades necessárias.

Depois, selecione uma origem CSS na qual a consulta de mídia deve ser adicionada.

Se optar por criar um arquivo CSS, aparecerá outro pop-up. Especifique o nome e o caminho do novo arquivo CSS e clique em OK.

Observação:

para desfazer, pressione Ctrl+Z (Win) ou Cmd+Z (Mac).

Excluir consultas de mídia

Clique com o botão direito do mouse na barra de consulta de mídia visual correspondente.
Clique em Excluir e clique na consulta de mídia que deseja excluir.
Clique em OK para confirmar que deseja excluir todas as consultas de mídia e os seletores associados.

Observação:

para desfazer, pressione Ctrl+Z (Win) ou Cmd+Z (Mac).

Exibir código para consultas de mídia

Clique com o botão direito do mouse na barra de consulta de mídia visual necessária e passe o mouse sobre Ir para código.

É exibida uma lista de todas as consultas de mídia nessa faixa de ponto de interrupção juntamente com os arquivos nos quais elas são declaradas.
Clique na consulta de mídia necessária para navegar até o código correspondente na Visualização de código.

Se a Visualização de código não estiver visível, o documento é alternado para a Visualização dividida para exibir o código.