files/es/tools/responsive_design_view/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---
title: Responsive Design View
slug: Tools/Responsive_Design_View
translation_of: Tools/Responsive_Design_Mode
---
<p>{{ fx_minversion_header("15.0") }}</p>

<p>La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. <a href="/en-US/docs/Web_Development/Responsive_Web_design">Diseño Adaptable</a> se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web <a href="http://mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a> vista con un área de contenido 320 por 480.</p>

<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="float: left; height: 628px; padding-right: 2em; width: 372px;">La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.</p>

<p>Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.</p>

<p>Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla &lt;esc&gt; se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.</p>

<p>En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).</p>

<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede utilizar el</span> <span class="hps">controlador de tamaño</span> <span class="hps">en la</span> <span class="hps">parte inferior derecha del</span> <span class="hps">área de contenido</span> <span class="hps">para cambiar el</span> <span class="hps">tamaño del área de</span> <span class="hps">contenido</span></span>.</p>