Diseño receptivo y desarrollo web móvil Introducción a los conceptos de diseño receptivo Ethan Marcotte (Ethan Marcotte) propuso el término Diseño web receptivo (RWD, Responsive Web Design) en 2010. En uno de sus artículos "Responsive Web Design · An A List Apart Article", integró las tres técnicas de desarrollo existentes (imágenes flexibles, diseño de cuadrícula flexible, media y media queries) y lo nombró Responsive Web Design. Entonces, ¿qué es un diseño verdaderamente receptivo? Marcot dijo que el verdadero método de diseño receptivo no es solo cambiar el diseño de la página web de acuerdo con el tamaño del área visible, sino también subvertir el método actual de diseño web en su conjunto. Es una especie de diseño perfecto para el contenido web de cualquier dispositivo Mecanismo de visualización. Tres elementos de diseño receptivo Imagen flexible La imagen flexible también se denomina imagen receptiva, lo que significa que la imagen puede cambiar con el cambio del contenedor principal, y el ancho está limitado por el contenedor principal y no se puede mostrar en el tamaño original de la imagen . Método de implementación 1. Establezca el ancho de la imagen en el ancho máximo: 100% 2. Si se proporciona una imagen de alta definición, para cargar diferentes imágenes de acuerdo con diferentes tamaños de dispositivo, se requiere procesamiento adicional. Es necesario adoptar la forma de consulta de medios para realizar la consulta de medios Los medios de consulta de medios ya existen en css2, y los atributos de medios y escenarios de uso se agregan a css3. Desventaja: Desventajas de la consulta de medios: el plan de desarrollo de la consulta de medios no es adecuado para demasiado páginas web. Tipo de medio pantalla tty proyección de tv
Los únicos tipos de medios ampliamente utilizados para la impresión de mano en braille aural all tip son la pantalla y todo.
Atributos de medios Los atributos de medios son contenido nuevo de CSS3. La mayoría de los atributos de medios tienen el prefijo "min-" y "max-" para expresar "menor o igual que" y "mayor o igual que". Esto evita el uso de caracteres "<" y ">" que entran en conflicto con HTML y XML. Nota: Los atributos de medios deben estar entre corchetes (); de lo contrario, no contendrá width | min-width | max-width height | min- altura | altura máxima ancho del dispositivo | ancho mínimo del dispositivo | ancho máximo del dispositivo altura del dispositivo | altura mínima del dispositivo | relación de aspecto de altura máxima del dispositivo | relación de aspecto mínima | relación de aspecto máxima relación de aspecto de dispositivo | relación de aspecto de dispositivo mínima | color de relación de aspecto de dispositivo máximo | color mínimo | índice de color de color máximo | índice de color mínimo | índice de color máximo monocromo | monocromo mínimo | resolución monocromática máxima | resolución mínima | escaneo de resolución máxima | operador lógico de cuadrícula no y o solo, puntos de interrupción, utilizamos la forma de consulta de medios para diseñar la página web, el principio es establecer varios rangos de intervalo, cuando el ancho del navegador cumple con el intervalo condicional. A continuación, ejecute el código CSS correspondiente. La configuración de puntos de interrupción puede basarse en la situación real o hacer referencia a la configuración de algunos marcos. El punto de interrupción del marco de arranque <768px pantalla ultra pequeña (generalmente se refiere a teléfonos móviles)> = 768px y <= 992px pantalla pequeña (generalmente se refiere a tabletas)> = 992px y <= 1200px pantalla mediana (monitor de escritorio)> = Pantalla grande de 1200 px (pantalla de escritorio más grande) diseño flexible desarrollo web móvil píxel píxel, también conocido como píxel, es la unidad básica de visualización de la imagen, traducida del inglés "píxel", pix es la abreviatura común de la palabra inglesa imagen , más Inglés La palabra "elemento" significa píxel, por lo que "píxel" significa "elemento de imagen" y, a veces, se le llama pel (elemento de imagen). Pixel es la base del diseño de una página web. Un píxel es el área más pequeña en la que una computadora puede mostrar un color específico. Cuando el tamaño del dispositivo es el mismo pero los píxeles se vuelven más densos, la transición de la pantalla que se puede mostrar es más detallada y el sitio web se ve más brillante. Píxel del dispositivo clasificado Píxel del dispositivo (píxeles independientes del dispositivo): los píxeles físicos de la pantalla del dispositivo, el número de píxeles físicos de cualquier dispositivo son píxeles CSS fijos Píxeles CSS (píxeles CSS): también conocidos como píxeles lógicos, creados para desarrolladores web, An capa abstracta utilizada en CSS y javascript Ventana gráfica (ventana gráfica) Ventana gráfica de diseño clasificado El área representada en el navegador móvil de la página web de la ventana gráfica, utilizada para cargar el contenido de la página web. La ventana gráfica de la ventana del navegador. La ventana gráfica ideal permite La ventana gráfica de diseño es igual a la ventana gráfica, es decir, la ventana ideal, propuesta por Jobs, por ejemplo: la ventana gráfica de diseño es equivalente al contenido de la página web, y la pantalla en el terminal móvil es equivalente a la ventana gráfica. Cuando configuramos la ventana gráfica de diseño para que sea la misma que la ventana visual, se convierte en una ventana gráfica ideal. También conocido como píxeles lógicos, se crea para desarrolladores web. Es una capa abstracta utilizada en CSS y javascript. Diseño de clasificación de la ventana gráfica. La página web de la ventana gráfica se representa en el navegador móvil. Se utiliza para cargar páginas web. Ventana gráfica de contenido La ventana gráfica ideal de la ventana del navegador hace que la ventana gráfica de diseño sea igual a la ventana visual, es decir, la ventana gráfica ideal, propuesta por Jobs. Por ejemplo: la ventana gráfica de diseño es equivalente al contenido de una página web y la pantalla en el terminal móvil es equivalente al contenido de una página web. Cuando configuramos la ventana gráfica de diseño para que sea la misma que la ventana visual, se convierte en una ventana gráfica ideal. También conocido como píxeles lógicos, se crea para desarrolladores web. Es una capa abstracta utilizada en CSS y javascript. Diseño de clasificación de la ventana gráfica. La página web de la ventana gráfica se representa en el navegador móvil. Se utiliza para cargar páginas web. Ventana gráfica de contenido La ventana gráfica ideal de la ventana del navegador hace que la ventana gráfica de diseño sea igual a la ventana visual, es decir, la ventana gráfica ideal, propuesta por Jobs. Por ejemplo: la ventana gráfica de diseño es equivalente al contenido de una página web y la pantalla en el terminal móvil es equivalente al contenido de una página web. Cuando configuramos la ventana gráfica de diseño para que sea la misma que la ventana visual, se convierte en una ventana gráfica ideal.
La denominada ventana gráfica ideal tiene el tamaño óptimo de la ventana gráfica de diseño en un dispositivo, y la página debajo de la ventana gráfica ideal es fácil de navegar y leer para los navegadores. Escala En el lado del escritorio, 1 píxel de CSS a menudo corresponde a 1 píxel físico de la pantalla de la computadora. En el lado del teléfono móvil, debido a la limitación del tamaño de la pantalla, el zoom es una operación frecuente. Independientemente de si estamos acercándonos o alejándonos, los píxeles CSS establecidos por el elemento (como el ancho: 300 px) son siempre los mismos, y la relación de zoom actual determina la cantidad de píxeles del dispositivo a los que corresponde un píxel CSS. El dispositivo DPR relación de píxeles DPR (devicePixelRatio) Es la relación de píxeles del dispositivo a píxeles CSS DPR = píxeles del dispositivo / píxeles CSS (en una dirección determinada ) cuando el zoom predeterminado es 100% En los dispositivos móviles anteriores, no existía el concepto de DPR. Con el desarrollo de la tecnología, la densidad de píxeles de la pantalla de los dispositivos móviles es cada vez mayor. A partir de iphone4, Apple introdujo la llamada pantalla retina retina. Se llama pantalla de retina porque el PPI (densidad de píxeles de la pantalla) de la pantalla es demasiado alto y la retina humana no puede distinguir los píxeles en la pantalla. La resolución de iphone4 se ha duplicado, pero el tamaño de la pantalla no ha cambiado. Esto significa que los píxeles en la pantalla del mismo tamaño se han duplicado, por lo que DPR = 2 Tomando iphone5 como ejemplo, el píxel CSS de iphone5 es 320px568px y DPR es 2 ., Por lo tanto, el píxel del dispositivo es 640px1136px ppi ppi se refiere a la cantidad de píxeles que se pueden mostrar por pulgada en la pantalla, es decir, la densidad de píxeles de la pantalla . La configuración de la metaetiqueta para el diseño del terminal móvil