1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
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
---
<div>{{ToolsSidebar}}</div>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="result_box" lang="pt"><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design"><span class="alt-edited hps">Designs</span> <span class="alt-edited hps">Responsivos</span></a> <span class="alt-edited hps">se adaptam a</span> <span class="hps">diferentes tamanhos de tela</span> <span class="hps">para fornecer</span> <span class="hps">uma apresentação</span> <span class="alt-edited hps">que seja adequada para</span> <span class="hps">diferentes tipos de</span> <span class="hps">dispositivos, como</span> <span class="hps">telefones celulares ou</span> <span class="hps">tablets.</span> <span class="alt-edited hps">O</span> Modo de Design Adaptável <span class="alt-edited hps">tornar mais fácil</span> <span class="alt-edited hps">de ver como</span> <span class="hps">seu site ou</span> <span class="hps">aplicativo web</span> <span class="hps">vai olhar para</span> <span class="hps">diferentes tamanhos de tela</span><span>.</span></span></div>
</div>
<p>{{EmbedYouTube("LBcE72sG2s8")}}</p>
<div class="almost_half_cell" id="gt-res-content">
<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="hps">A imagem abaixo mostra</span> <span class="hps">uma página na</span> <span class="hps">versão móvel da</span> <span class="hps">Wikipedia</span> <span class="hps">visto com</span> <span class="hps">uma</span> <span class="hps">área de 320</span> <span class="hps">por 480</span><span class="hps"> de conteúdo.</span></span></div>
</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png"></p>
<p><span id="result_box" lang="pt"><span class="alt-edited hps">O</span> Modo de Design Adaptável <span class="hps">é conveniente porque</span> <span class="hps">você pode rapidamente e</span> <span class="hps">precisamente</span> <span class="hps">alterar o tamanho</span> <span class="hps">da área de conteúdo</span><span>.</span><br>
<br>
<span class="hps">Claro</span><span>, você pode simplesmente</span> <span class="hps">redimensionar a janela do</span> <span class="hps">navegador:</span> <span class="hps">mas diminuir</span> <span class="hps">a janela do navegador</span> torna <span class="hps">menor</span> <span class="hps">todas as suas outras</span> <span class="hps">abas</span> <span class="hps">menores</span> <span class="hps">também, e</span> <span class="hps">pode fazer</span> <span class="hps">a interface do</span> <span class="hps">navegador</span> <span class="hps">ficar muito mais difícil de</span> <span class="hps">usar.</span><br>
<br>
<span class="hps">Enquanto o</span> Modo de Design Adaptável <span class="hps">estiver ativado, você</span> <span class="hps">pode</span> <span class="hps">continuar a navegação</span><span>, como faria normalmente</span> <span class="hps">na área de conteúdo</span> <span class="hps">redimensionada</span><span>.</span></span></p>
<h2 id="Ativando_e_Desativando">Ativando e Desativando</h2>
<p>Existem três maneiras de ativar o Modo de Design Adaptável:</p>
<ul>
<li><span id="result_box" lang="pt"><span class="hps">Selecione</span> <span class="atn hps">"</span>Modo de Design Adaptável<span>" do submenu</span> <span class="hps">Web Developer</span> <span class="hps">no menu</span> <span class="hps">Firefox</span> <span class="hps">(ou</span> <span class="hps">no menu Ferramentas</span><span>, se você</span> <span class="hps">exibir a barra de</span> <span class="hps">menu ou</span> <span class="hps">estão no</span> <span class="hps">OS</span> <span class="hps">X)</span></span></li>
<li>Pressione o botão "Modo Design Adaptável" na <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Toolbar">barra de ferramentas da caixa de ferramentas</a></li>
<li>Pressione Ctrl + Shift + M, (ou Cmd + Opt + M no Mac OS X)</li>
</ul>
<p>e três maneiras de retirar o Modo Design Adaptável:</p>
<ul>
<li>Selecione o item de menu "Modo Design Adaptável" novamente</li>
<li>Clique no botão "fechar" no canto superior esquerdo da janela</li>
<li>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.</li>
</ul>
<h2 id="Redimensionamento">Redimensionamento</h2>
<p>Você pode redimensionar a área de contéudo de duas maneiras:</p>
<ul>
<li><span id="ouHighlight__0_4TO0_5">usando</span><span id="noHighlight_0.5403134427457869"> </span><span id="ouHighlight__6_8TO7_7">o</span><span id="noHighlight_0.06010892189594241"> </span><a href="/en-US/docs/Tools/Responsive_Design_View$translate?tolocale=pt-BR#select-size"><span id="ouHighlight__24_30TO9_16">controle</span><span id="noHighlight_0.12094158215310513"> </span><span id="ouHighlight__10_16TO18_27">"Selecione</span><span id="noHighlight_0.07769393147396586"> </span><span id="ouHighlight__18_21TO29_36">tamanho"</span></a></li>
<li><span class="highlight" id="ouHighlight__0_7TO0_7">clicando</span><span id="noHighlight_0.8326165955795358"> </span><span id="ouHighlight__9_11TO9_9">e</span><span id="noHighlight_0.5805372790500697"> </span><span id="ouHighlight__13_20TO11_20">arrastando</span><span id="noHighlight_0.11158011591201744"> </span><span id="ouHighlight__25_27TO22_23">os</span><span id="noHighlight_0.6293012360514642"> </span><span id="ouHighlight__29_36TO25_33">controles</span><span id="noHighlight_0.8869847575190439"> </span><span id="ouHighlight__41_43TO35_36">do</span><span id="noHighlight_0.9673397683973173"> </span><span id="ouHighlight__62_66TO38_41">lado</span><span id="noHighlight_0.9241360200103401"> </span><span id="ouHighlight__45_49TO43_49">direito</span><span id="noHighlight_0.424347904316591"> </span><span id="ouHighlight__51_53TO51_51">e</span><span id="noHighlight_0.6767187887297804"> </span><span id="ouHighlight__55_60TO53_60">inferior</span><span id="noHighlight_0.19151763438304825"> </span><span id="ouHighlight__68_69TO62_63">da</span><span id="noHighlight_0.1219278136649814"> </span><span id="ouHighlight__83_86TO65_68">área</span><span id="noHighlight_0.13771615517950997"> de </span><span id="ouHighlight__75_81TO73_80">conteúdo</span><span id="noHighlight_0.17821394692938886">,</span><span id="noHighlight_0.39006493792224095"> </span><span id="ouHighlight__89_90TO83_84">ou</span><span id="noHighlight_0.09505792682868852"> </span><span id="ouHighlight__92_93TO86_87">no</span><span id="noHighlight_0.4623385424525679"> </span><span id="ouHighlight__112_117TO89_93">canto</span><span id="noHighlight_0.6261242674147262"> </span><span id="ouHighlight__99_110TO95_110">inferior direito</span></li>
</ul>
<p><span id="result_box" lang="pt"><span class="hps">Se você redimensionar</span> <span class="hps">usando</span> <span class="hps">clique-e</span><span class="atn">-</span><span>arraste</span> <span class="hps">você pode</span> <span class="hps">manter pressionada a tecla</span> <span class="atn hps">Control (</span><span>Cmd</span> <span class="alt-edited hps">no</span> <span class="hps">Max</span> <span class="hps">OS</span> <span class="hps">X)</span> <span class="hps">para abrandar</span> <span class="hps">a velocidade com que</span> <span class="hps">a área</span> <span class="hps">é redimensionado</span><span>.</span> <span class="hps">Isto</span> <span class="hps">faz com que seja</span> <span class="hps">mais fácil</span> <span class="hps">para ajustar o</span> <span class="hps">tamanho</span> <span class="hps">precisamente</span><span>.</span></span></p>
<div style="overflow: hidden;">
<h2 id="Controles_do_Modo_Design_Adaptável">Controles do Modo Design Adaptável</h2>
<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="display: block; height: 356px; margin-left: auto; margin-right: auto; width: 545px;"><span id="ouHighlight__6_8TO0_1">Na</span><span id="noHighlight_0.3992395743187196"> </span><span id="ouHighlight__10_12TO3_16">parte superior</span><span id="noHighlight_0.029530961761023766"> </span><span id="ouHighlight__14_15TO18_19">da</span><span id="noHighlight_0.5328966262421795"> </span><span id="ouHighlight__17_26TO21_26">janela</span><span id="noHighlight_0.3739015015495417"> </span><span id="ouHighlight__28_29TO28_29">em</span><span id="noHighlight_0.14187017270829438"> </span><span id="ouHighlight__31_35TO31_33">que</span><span id="noHighlight_0.16468671241646282"> o </span><span id="ouHighlight__55_58TO48_51">Modo</span><span id="noHighlight_0.9215700015444891"> </span><span id="ouHighlight__48_53TO53_58">Design</span><span id="noHighlight_0.9981710228733524"> Adaptável </span><span id="ouHighlight__60_67TO60_64">exibe</span><span id="noHighlight_0.5200181544401548"> </span><span id="ouHighlight__69_71TO66_66">a</span><span id="noHighlight_0.19604424239869145"> </span><span id="ouHighlight__73_76TO68_73">página</span><span id="noHighlight_0.8681670677634923">,</span><span id="noHighlight_0.2049457735100454"> </span><span id="ouHighlight__79_87TO76_82">existem</span><span id="noHighlight_0.39488315206134206"> </span><span id="ouHighlight__89_92TO84_88">cinco</span><span id="noHighlight_0.490502210768601"> </span><span id="ouHighlight__94_101TO90_98">controles</span><span id="noHighlight_0.31393361318969104">:</span></p>
<table class="standard-table">
<tbody>
<tr>
<td><strong>Close</strong> (Fechar)</td>
<td>Fechar Modo Design Adaptável e retornar à navegação normal</td>
</tr>
<tr>
<td>
<p><strong><a name="select-size">Select size</a></strong> (Selecionar o tamanho)</p>
</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__0_5TO0_7">Escolher</span><span id="noHighlight_0.05510603446027207"> </span><span id="ouHighlight__7_10TO9_13">entre</span><span id="noHighlight_0.012267693134043411"> </span><span id="ouHighlight__12_12TO15_17">uma</span><span id="noHighlight_0.014932811650671063"> </span><span id="ouHighlight__14_19TO19_23">série</span><span id="noHighlight_0.758006041014549"> </span><span id="ouHighlight__21_22TO25_26">de</span><span id="noHighlight_0.10495600081798528"> </span><span id="ouHighlight__31_35TO28_34">largura</span><span id="noHighlight_0.5216275624470126"> </span><span id="ouHighlight__24_29TO36_46">predefinida</span><span id="noHighlight_0.46611446599781203"> </span><span id="ouHighlight__37_37TO48_48">x</span><span id="noHighlight_0.1649472149451352"> </span><span id="ouHighlight__46_57TO50_60">combinações</span><span id="noHighlight_0.6836811381784039"> de </span><span id="ouHighlight__39_44TO65_70">altura</span><span id="noHighlight_0.4570348654255373">,</span><span id="noHighlight_0.12098261582483505"> </span><span id="ouHighlight__60_61TO73_74">ou</span><span id="noHighlight_0.7087637160384633"> </span><span id="ouHighlight__63_68TO76_82">definir</span><span id="noHighlight_0.496894860322988"> o </span><span id="ouHighlight__70_73TO86_88">seu</span><span id="noHighlight_0.9140920298253061"> </span><span id="ouHighlight__75_77TO90_96">próprio</span><span id="noHighlight_0.5010510106372641">.</span></div>
<div><span id="ouHighlight__5_11TO0_6">Firefox</span><span id="noHighlight_0.5756585704510945"> </span><span id="ouHighlight__13_14TO8_9">33</span><span id="noHighlight_0.09975119408724631"> </span><span id="ouHighlight__16_22TO11_19">em diante</span><span id="noHighlight_0.6635935281245849">,</span><span id="noHighlight_0.7438692970514831"> </span><span id="ouHighlight__25_27TO22_23">os</span><span id="noHighlight_0.4355831475066668"> </span><span id="ouHighlight__29_35TO25_31">números</span><span id="noHighlight_0.8851799775263688"> </span><span id="ouHighlight__37_45TO33_40">exibidos</span><span id="noHighlight_0.2014015796894374"> </span><span id="ouHighlight__47_50TO42_45">aqui</span><span id="noHighlight_0.5104628333754239"> </span><span id="ouHighlight__52_54TO47_49">são</span><span id="noHighlight_0.6550056061906334"> </span><span id="ouHighlight__65_72TO51_59">editáveis</span><span id="noHighlight_0.7464375519364586"> </span><span id="ouHighlight__56_63TO61_71">diretamente</span><span id="noHighlight_0.1684100599266043">,</span><span id="noHighlight_0.6375848196470268"> </span><span id="ouHighlight__75_76TO74_78">assim</span><span id="noHighlight_0.6432344737164473"> </span><span id="ouHighlight__78_80TO80_83">você</span><span id="noHighlight_0.21115858116274067"> </span><span id="ouHighlight__82_84TO85_88">pode</span><span id="noHighlight_0.5714140381614318"> </span><span id="ouHighlight__86_91TO90_99">facilmente</span><span id="noHighlight_0.5590636878226835"> </span><span id="ouHighlight__93_98TO101_107">definir</span><span id="noHighlight_0.38528303753948656"> </span><span id="ouHighlight__107_116TO109_117">dimensões</span><span id="noHighlight_0.19108673596595993"> </span><span id="ouHighlight__100_105TO119_132">personalizadas</span><span id="noHighlight_0.8081630914805079">.</span></div>
</div>
</td>
</tr>
<tr>
<td><strong>Portrait/Landscape</strong> (Retrato/Paisagem)</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__0_5TO0_6">Alterne</span><span id="noHighlight_0.6652050815279689"> </span><span id="ouHighlight__7_9TO8_8">a</span><span id="noHighlight_0.7179117059359613"> </span><span id="ouHighlight__11_16TO10_13">tela</span><span id="noHighlight_0.33497462507156583"> </span><span id="ouHighlight__18_24TO15_19">entre</span><span id="noHighlight_0.34310517333772883"> </span><span id="ouHighlight__49_52TO21_32">visualização</span><span id="noHighlight_0.7396021998958475"> </span><span id="ouHighlight__26_33TO34_40">retrato</span><span id="noHighlight_0.9722827215437846"> </span><span id="ouHighlight__35_37TO42_42">e</span><span id="noHighlight_0.18911941048212988"> </span><span id="ouHighlight__39_47TO44_51">paisagem</span><span id="noHighlight_0.9689423906659975">.</span></div>
</div>
</td>
</tr>
<tr>
<td>
<p><strong>Simulate touch events</strong> (Simular eventos de toque)</p>
</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span class="highlight" id="ouHighlight__0_13TO0_15">Ativar/desativar</span><span id="noHighlight_0.7314583975835754"> </span><span id="ouHighlight__15_19TO17_21">simulação de eventos de toque</span><span id="noHighlight_0.29946720516432024">: </span><span id="ouHighlight__39_43TO41_48">enquanto</span><span id="noHighlight_0.3003017304493243"> a </span><span id="ouHighlight__57_66TO52_60">simulação</span><span id="noHighlight_0.2539792794784823"> de </span><span id="ouHighlight__51_55TO65_71">eventos</span><span id="noHighlight_0.4752854432379472"> de </span><span id="ouHighlight__45_49TO76_80">toque</span><span id="noHighlight_0.9606273334036314"> </span><span id="ouHighlight__68_69TO82_85">está</span><span id="noHighlight_0.17017646489179272"> </span><span id="ouHighlight__71_77TO87_96">habilitada</span><span id="noHighlight_0.6582178888414498">,</span><span id="noHighlight_0.06081356504641222"> </span><span id="ouHighlight__86_91TO99_105">eventos</span><span id="noHighlight_0.3352930944939859"> de </span><span id="ouHighlight__80_84TO110_114">mouse</span><span id="noHighlight_0.8437336217817044"> </span><span id="ouHighlight__93_95TO116_118">são</span><span id="noHighlight_0.4506537870215023"> </span><span id="ouHighlight__97_106TO120_129">traduzidos</span><span id="noHighlight_0.43558949167422756"> </span><span id="ouHighlight__108_111TO131_132">em</span><span id="noHighlight_0.9974495078330906"> </span><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><span id="ouHighlight__119_124TO134_140">eventos</span><span id="noHighlight_0.37276704321010756"> de </span><span id="ouHighlight__113_117TO145_149">toque</span></a><span id="noHighlight_0.4414145507777094">.</span></div>
</div>
</td>
</tr>
<tr>
<td>
<p><strong>Take screenshot</strong> (Captura de Tela)</p>
</td>
<td><span id="result_box" lang="pt"><span class="hps">Tira uma captura de tela</span> <span class="hps">da área de conteúdo</span><span>.</span></span>
<div><span id="ouHighlight__0_10TO0_10">Capturas de Tela </span><span id="ouHighlight__12_14TO12_14">são</span><span id="noHighlight_0.7756256980434241"> </span><span id="ouHighlight__16_20TO16_21">salvas</span><span id="noHighlight_0.7416410116405266"> </span><span id="ouHighlight__22_23TO23_26">para</span><span id="noHighlight_0.3153622479901257"> o </span><span id="ouHighlight__52_59TO30_34">local</span><span id="noHighlight_0.5546600825899267"> de </span><span id="ouHighlight__43_50TO39_46">download</span><span id="noHighlight_0.276958216264765"> </span><span id="ouHighlight__35_41TO48_53">padrão</span><span id="noHighlight_0.9675183455517207"> </span><span id="ouHighlight__25_33TO55_64">do Firefox</span><span id="noHighlight_0.9916051206430999">.</span></div>
</td>
</tr>
</tbody>
</table>
</div>
|
