Clique na barra Consulta visual de mídia que corresponde à consulta de mídia que deseja editar.
Última atualização em
20 de dez de 2021
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 dispositivo 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 depois chamá-las usando a seguinte 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 (em inglês).
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 interrupção e a visualizar como os diferentes componentes de sua página se reajustam em diferentes visores. Enquanto visualiza 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 max-width
Azul : consultas de mídia com condições min-width e max-width
Roxo : consultas de mídia com condições min-width
As consultas de mídia listadas no painel do 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 contém condições min-width, a barra roxa não é exibida.
Os valores de breakpoint 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 o botão Alternar barra de Consultas Visuais de Mídia 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 será ajustado ao ponto de interrupção.
Como alternativa, você pode arrastar o controle deslizante para o ponto de interrupção necessário.
Para redimensionar a visualização para o tamanho da janela do documento do Dreamweaver, execute 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 não visualizar a área cinza, arraste o controle deslizante para a esquerda.
- Selecione a opção Largura completa na lista suspensa na parte inferior da janela do documento.
Se não visualizar essa opção, arraste o controle deslizante para diminuir o tamanho da página da Web.
Editar consultas de mídia visualmente
São exibidas alças de redimensionamento. Para consultas de mídia que têm valores min e max-width, as alças de redimensionamento aparecem em ambos os lados da barra.
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 junto com a mensagem de êxito.
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 inserir os valores usando o teclado.
Adicionar novas consultas de mídia
Arraste o seletor ao longo da régua até o tamanho necessário.
Clique em 
.
No pop-up que é exibido, a opção max-width está selecionada por padrão. Para especificar min-width ou min-max, selecione a opção apropriada na lista suspensa e selecione as unidades necessárias.
Em seguida, 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.
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 visual de mídia correspondente.
Clique em Excluir e, em seguida, clique na consulta de mídia que deseja excluir.
Clique em OK para confirmar que deseja excluir todas as consultas de mídia e seletores associados.
Para desfazer, pressione Ctrl+Z (Win) ou Cmd+Z (Mac).
Visualizar o código para consultas de mídia
Clique com o botão direito do mouse na barra Consulta visual de mídia necessária e passe o mouse sobre Ir para código.
Uma lista de todas as consultas de mídia nesse intervalo de ponto de interrupção específico, junto com os arquivos nos quais elas são declaradas, é exibida.
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 mudará para visualização Dividida para exibir o código.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
