Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

Responsive Web Design - La ventana gráfica


¿Cuál es la ventana gráfica?

La mirilla es zona visible del usuario de una página web.

La ventana gráfica varía con el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de ordenador.

Antes de las tabletas y los teléfonos móviles, las páginas web se han diseñado sólo para las pantallas de ordenador, y era común para las páginas web que tengan un diseño estático y un tamaño fijo.

Entonces, cuando comenzamos a navegar por internet usando las tabletas y los teléfonos móviles, páginas web tamaño fijo eran demasiado grandes para caber la ventana gráfica. Para solucionar este problema, los navegadores de los dispositivos de escala reducida toda la página Web para ajustarse a la pantalla.

Esto no era perfecto !! Pero una solución rápida.


Ajuste de la ventana gráfica

HTML5 introdujo un método para que los diseñadores web tienen control sobre la ventana gráfica, a través de la <meta> etiqueta.

Debe incluir la siguiente <meta> elemento de ventana gráfica en todas sus páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un <meta> viewport da las instrucciones de su navegador sobre cómo controlar las dimensiones y la escala de la página.

La width=device-width la parte establece el ancho de la página para seguir a la pantalla de una anchura del dispositivo (que variará dependiendo del dispositivo).

La initial-scale=1.0 parte establece el nivel de zoom inicial cuando la página se carga por primera vez por el navegador.

Aquí hay un ejemplo de una página web sin la etiqueta meta ventana gráfica, y la misma página web con la etiqueta meta ventana gráfica:

Consejo: Si está explorando esta persona con un teléfono o una tableta, puede hacer clic en los dos enlaces para ver la diferencia.



Tamaño de contenido a la ventana gráfica

Los usuarios se utilizan para desplazarse verticalmente sitios web tanto en el escritorio y dispositivos móviles - pero no de forma horizontal!

Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente, o alejar la imagen, para ver toda la página web que se traduce en una experiencia de usuario pobre.

Algunas reglas adicionales a seguir:

1. No utilizar grandes elementos de ancho fijo - Por ejemplo, si una imagen se visualiza en una anchura mayor que la ventana se puede hacer que la ventana gráfica para desplazarse horizontalmente. Recuerde que debe ajustar este contenido para que quepa en el ancho de la ventana gráfica.

2. No deje que el contenido se basan en un ancho de visualización particular, para rendir bien - Desde dimensiones de la pantalla y la anchura en píxeles CSS varían ampliamente entre los dispositivos, el contenido no debe depender de un ancho de ventana particular, para hacer así.

3. Uso consultas de medios CSS para aplicar un estilo diferente para pantallas pequeñas y grandes - Ajuste de grandes anchos de CSS absolutos de los elementos de página, se hace que el elemento sea demasiado amplia para la ventana gráfica en un dispositivo más pequeño. En su lugar, considere el uso de valores de anchura relativos, como width: 100%. Además, tenga cuidado de usar grandes valores de posicionamiento absoluto. Se puede hacer que el elemento caiga fuera de la ventana gráfica en dispositivos pequeños.