Crie uma página da web.
Última atualização em
27 de abr de 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 introdução detalhada às consultas de mídia, consulte o artigo de Don Booth no Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Para mais informações sobre consultas de mídia do W3C, consulte www.w3.org/TR/css3-mediaqueries/.
Criar consulta de mídia
No Dreamweaver, é possível criar um arquivo de consulta de mídia para todo o local ou uma consulta de mídia específica do documento.
Arquivo de consulta de mídia para todo o site
Especifica configurações de exibição para todas as páginas do local que incluem o arquivo.
O arquivo de consulta de mídia para todo o site atua como o repositório central de todas as consultas de mídia do seu site.Depois de criar este arquivo, vincule a ele as páginas do local que devem usar as consultas de mídia do arquivo para exibição.
Consulta de mídia específica do documento
A consulta de mídia é inserida diretamente no documento e a página é exibida com base na consulta de mídia inserida.
Selecione Modificar > Consultas de mídia.
Siga um destes procedimentos:
Para criar um arquivo de consulta de mídia para todo o local, selecione Arquivo de consultas de mídia para todo o local.
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:
Clique em Especificar.
Selecione Criar novo arquivo.
Especifique um nome para o arquivo e clique em OK.
É possível que alguns dispositivos não relatem a largura real.Para forçar os dispositivos a relatarem a largura real, verifique se a opção Forçar dispositivos a relatarem largura real está ativada.
O código a seguir é inserido no arquivo quando você escolhe esta 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 Padrões predefinidos se quiser começar com padrões predefinidos.
Selecione linhas na tabela e edite as 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.
Nota
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 procure o arquivo CSS do dispositivo.
Se quiser especificar um arquivo CSS que ainda não criou, 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: para páginas existentes, certifique-se de incluir 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 de todo o local para o local www.adobe.com:
<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á criou 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 relatar sua largura real, certifique-se de que a opção Forçar dispositivos a relatarem largura real esteja ativada.O código a seguir é inserido no arquivo quando você escolhe esta opção.
<meta name="viewport" content="width=device-width">
Clique em OK.
Escolher um arquivo de consultas de mídia diferente de todo o local
Use este procedimento para alterar o arquivo de consultas de mídia do site inteiro 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 de todo o local no painel direito, clique em Procurar para selecionar o arquivo CSS de consulta de mídia.
Nota
Alterar o arquivo de consultas de mídia de todo o site não afeta documentos vinculados a um arquivo diferente ou anterior de consulta de mídia de todo o site.
Clique em Salvar.
Visualizar páginas da Web com base na consulta de mídia
Dimensões especificadas em uma consulta de mídia aparecem nas opções para o botão/tamanho da janela Multitela.Quando você seleciona uma dimensão do menu, as seguintes alteraçõ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.
Veja também
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
