--- title: Modo Design Adaptável slug: Tools/Responsive_Design_Mode tags: - Desenvolvimento Web - Design - Design Adaptável - Design Responsivo - Ferramentas - Ferramentas de Desenvolvimento - Firefox - Guia(2) - Guide - Guía - I10n:priority - Responsive Design - Tools translation_of: Tools/Responsive_Design_Mode original_slug: Tools/Modo_Design_Adaptavel ---

Designs Responsivos se adaptam a diferentes tamanhos de tela para fornecer uma apresentação que seja adequada para diferentes tipos de dispositivos, como telefones celulares ou tablets. O Modo de Design Adaptável tornar mais fácil de ver como seu site ou aplicativo web vai olhar para diferentes tamanhos de tela.

A imagem abaixo mostra uma página na versão móvel da Wikipedia visto com uma área de 320 por 480 de conteúdo.

O Modo de Design Adaptável é conveniente porque você pode rapidamente e precisamente alterar o tamanho da área de conteúdo.

Claro, você pode simplesmente redimensionar a janela do navegador: mas diminuir a janela do navegador torna menor todas as suas outras abas menores também, e pode fazer a interface do navegador ficar muito mais difícil de usar.

Enquanto o Modo de Design Adaptável estiver ativado, você pode continuar a navegação, como faria normalmente na área de conteúdo redimensionada.

Ativando e Desativando

Existem três maneiras de ativar o Modo de Design Adaptável:

Selecione "Modo de Design Adaptável" do submenu Web Developer no menu Firefox (ou no menu Ferramentas, se você exibir a barra de menu ou estão no OS X)
Pressione o botão "Modo Design Adaptável" na barra de ferramentas da caixa de ferramentas
Pressione Ctrl + Shift + M, (ou Cmd + Opt + M no Mac OS X)

e três maneiras de retirar o Modo Design Adaptável:

Selecione o item de menu "Modo Design Adaptável" novamente
Clique no botão "fechar" no canto superior esquerdo da janela
Pressione Ctrl + Shift + M, (ou Cmd + Opt + M no Mac OS X). Antes do Firefox 34, Escape, também irá fechar o Modo Design adaptável.

Redimensionamento

Você pode redimensionar a área de contéudo de duas maneiras:

usando o controle "Selecione tamanho"
clicando e arrastando os controles do lado direito e inferior da área de conteúdo, ou no canto inferior direito

Se você redimensionar usando clique-e-arraste você pode manter pressionada a tecla Control (Cmd no Max OS X) para abrandar a velocidade com que a área é redimensionado. Isto faz com que seja mais fácil para ajustar o tamanho precisamente.

Controles do Modo Design Adaptável

Na parte superior da janela em que o Modo Design Adaptável exibe a página, existem cinco controles:

Close (Fechar)	Fechar Modo Design Adaptável e retornar à navegação normal
Select size (Selecionar o tamanho)	Escolher entre uma série de largura predefinida x combinações de altura, ou definir o seu próprio. Firefox 33 em diante, os números exibidos aqui são editáveis diretamente, assim você pode facilmente definir dimensões personalizadas.
Portrait/Landscape (Retrato/Paisagem)	Alterne a tela entre visualização retrato e paisagem.
Simulate touch events (Simular eventos de toque)	Ativar/desativar simulação de eventos de toque: enquanto a simulação de eventos de toque está habilitada, eventos de mouse são traduzidos em eventos de toque.
Take screenshot (Captura de Tela)	Tira uma captura de tela da área de conteúdo. Capturas de Tela são salvas para o local de download padrão do Firefox.