Source: https://ayuda.windev.es/es-ES/?9000173
Timestamp: 2020-05-29 01:16:45+00:00

Document:
Diseño Web con capacidad de respuesta: Consejos - PC SOFT - Documentación en línea
¿Cuándo crear un nuevo rango de resolución?
¿Cómo manejar la reducción o el aumento de las rebanadas?
¿Cómo optimizar el espacio de Visible en un rango de resolución?
¿Por qué anular la posición y el tamaño de los controles causa una superposición en el navegador?
El Responsive Web Design fue utilizado en sus páginas, pero todavía se encuentran algunos puntos de bloqueo.
Esta página presenta varios consejos de diseño.
Compruebe todos los errores de UI: indican que los afectados control y rango de resolución.
Comienza desde el Default rango de resolución:
Empieza desde el "Escritorio" rango de resolución en modo "Escritorio primero" y reduce el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
Empiece desde el "Móvil" rango de resolución en modo "Móvil primero" y amplíe el navegador en el editor (usando el manipular) para comprobar la consistencia de las modificaciones.
Puedes crear un rango de resolución:
Para administrar un dispositivo específico.
Para gestionar una visualización específica. en el ejemplo siguiente (página en modo "Desktop First"), se solicita una visualización intermedia:
Por Default, los controles están usando el anclaje en ancho "Adaptado a la red". Por lo tanto, los controles se reducen o amplían proporcionalmente según el modo (Desktop First o Mobile First).. Por ejemplo, en "Desktop First".:
Para limitar la reducción de controles, todo lo que tiene que hacer es definir el tamaño mínimo:
La opción "Tamaño mínimo" en la pestaña "UI" de la ventana de control description.
La opción "Tamaño mínimo" en la ventana de gestión de las anclas de control.
Para evitar reducir los controles, se debe aplicar a los controles el anclaje en anchura "Use the edit size"..
Observación: Si se produce un error en la interfaz de usuario o si el contenido del control no se puede utilizar visualmente, el control debe ser movido y redimensionado.
El diseño de la página está a cargo de Default. El contenido de la página está adaptado a la rango de resolución.
Para optimizar el espacio de la Visible, puedes reducir los márgenes de la página (dentro de los márgenes) en una rango de resolución y aplicar el anclaje horizontal "Use the edit size" a los controles.
Por ejemplo, en el modo Desktop First:
La posición de la control se anula en la rango de resolución "Móvil" y/o "Tableta".: en el navegador, anular la posición y el tamaño de los controles hace que se superpongan.
¿Cuál es el problema? Anulando la posición en el "Móvil" y/o "Tableta" rango de resolución cambia el orden de los controles definidos en el "Escritorio" rango de resolución (que se usa como reference rango de resolución en el modo "Escritorio primero").
En el modo "Diseño Web con capacidad de respuesta", los controles están organizados en relación con los demás.. Este orden depende de la posición (de arriba hacia abajo y luego de izquierda a derecha) y del anclaje.. Debe ser exactamente igual en todas las rebanadas.
De hecho, la tecnología de "Diseño Web Responsable" está usando un solo flujo de HTML para todos los cortes, mientras reposiciona los controles por CSS. El orden de los controles en el reference rango de resolución define el orden de los controles en el flujo de HTML.
Ejemplo: En el siguiente ejemplo, la página contiene una celda que agrupa otra celda y un Image:
El orden de los controles en el "Escritorio" rango de resolución (la referencia rango de resolución) es:
la célula_1 que agrupa la segunda célula_2 y la Image,
la célula CELL_2,
En el rango de resolución "Mobile", el tamaño y la poción de los controles se sobrescribe: el Image se coloca antes de la celda CELL_2. El orden de los controles en el "Móvil" rango de resolución es diferente del orden de los controles en el "Escritorio" rango de resolución:
En tiempo de ejecución, hay una superposición, ya que el orden de los controles en las porciones "Desktop" y "Mobile" es diferente: el Image se desbordará en la celda CELL_2 y no puede:
Tpara evitar cualquier superposición inesperada en el navegador, asegúrese de que el orden de los controles en las secciones "Móvil" y "Tableta" es el mismo que el orden de los controles en el "Escritorio" rango de resolución (referencia rango de resolución).
En nuestro ejemplo, para obtener el resultado esperado, se pueden utilizar dos controles Imagen:
El primer control Imagen se colocará antes del control CELL_2 en el Escritorio rango de resolución (por lo tanto, será el primero en el orden de los controles en el reference rango de resolución). Será Visible en el "Móvil" rango de resolución solamente.
El segundo control Imagen será Visible en el "Escritorio" rango de resolución solamente.
Para simplificar la colocación de los controles en el rango de resolución "Móvil" y/o "Tableta", a partir de la versión 21 Actualización 3, se genera sistemáticamente un error de compilación del UI por parte del editor de la página si no se respeta el orden de los controles entre los diferentes cortes.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución