Crie uma página da web.
Última atualização em
27/04/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.
