Recientemente, comencé a ponerme en contacto con los conocimientos relevantes sobre el desarrollo de terminales móviles. Estas son algunas conclusiones:
1. Conceptos básicos
Tamaño de la pantalla: longitud diagonal (cm)
Resolución de la pantalla: el número de píxeles físicos en las direcciones horizontal y vertical (píxeles físicos)
Densidad de la pantalla: por El número de píxeles físicos en pulgadas
Tamaño de ventana gráfica El número
de píxeles css horizontales y verticales (píxeles css)
2.4 píxeles 3 ventanas gráficas 2 operaciones 1 escala
4 píxeles:
la
resolución física de píxeles es la imagen de la pantalla ¿La unidad más pequeña
del tamaño de pantalla real ocupada por un píxel físico es la misma en diferentes dispositivos?
Cuando el
dispositivo se envía de fábrica, la cantidad de píxeles físicos contenidos en el dispositivo y el tamaño real de la pantalla ocupada por un píxel físico no cambiarán. El
píxel CSS
es la unidad más pequeña utilizada por los desarrolladores web.
Un píxel CSS eventualmente se convertirá en físico Aparecen píxeles en la pantalla.
¿Cuántos píxeles físicos ocupa un píxel CSS? ¿Quién es?
Características de la pantalla El comportamiento de zoom del usuario
no tiene en cuenta el zoom del usuario.
Sin ventana gráfica:
cuántos píxeles físicos (resolución horizontal)
están ocupados horizontalmente por esta pantalla (cuántos píxeles CSS (dimensiones horizontales de la ventana gráfica visual)
están ocupados horizontalmente por esta pantalla) ventana gráfica:
relación de píxeles
El número de píxeles físicos ocupados en una dirección / el número de píxeles css ocupados en una dirección
Considere el zoom del usuario
. Según las características de la pantalla:
acercar: los píxeles css ocupan más píxeles físicos
reducir: los píxeles css ocupan más menos de píxel físico
dispositivo pixel independiente
es un dispositivo de pixel css interfaz de acoplamiento, una vez que el pixel independiente y el gancho de colgar css pixel (width = dispositivo de anchura)
en este momento que el píxel para hacer una diferencia real
de mapa de bits de píxeles
de imagen de una unidad mínima
pixeles de mapa de bits En comparación con los píxeles físicos, la imagen puede mostrar
3 ventanas gráficas de forma perfecta y clara.
La
ventana gráfica de
diseño determina el diseño de la página. La ventana visual
determina
cuántos píxeles físicos puede ver el usuario en un píxel css y la ventana visual tiene una enorme Relación
Se determina el tamaño real de una ventana gráfica visual (tamaño de pantalla)
Se determina el número de píxeles físicos contenidos en una ventana gráfica visual (resolución)
El número de píxeles CSS contenidos en una ventana gráfica visual es incierto (usuario Comportamiento de escala)
Dispositivo de
ventana ideal El valor representado por las
operaciones independientes del píxel 2 El
usuario
solo afecta al
sistema de ventana gráfica de diseño (escala inicial)
a la ventana gráfica de afecta a la ventana gráfica de diseño y a la ventana visual
El uso de la escala inicial en la etiqueta <meta> para cambiar la proporción de píxeles afectará la proporción correspondiente de píxeles CSS y píxeles físicos, y la cantidad de píxeles CSS contenidos en la ventana visual también
cambiará, es decir, la ventana visual cambiará Por lo tanto, afecta la ventana gráfica de diseño y la ventana visual.
Acercar
Ampliar el área de un píxel css, el tamaño de la ventana visual se hace más pequeño y el número de píxeles físicos contenidos en un píxel css se hace más grande
Reducir y
reducir el área de un píxel css, el tamaño de la ventana visual se hace más grande, el tamaño físico de un píxel css. el número de píxeles menos
píxeles que la
definición oficial:
píxel físico / píxeles de dispositivo independientes
píxeles de número en número de píxeles CSS físico ocupado una dirección / dirección ocupada por un
accidente de 3.3
1. mucho elemento
utilizando La ventana gráfica perfecta (con ancho = ancho del dispositivo y escala inicial = 1.0) resuelve el problema de elementos demasiado grandes que exceden la ventana visual y sin barra de desplazamiento
2. El conflicto entre el ancho y la escala inicial
quién escucha a quién (quién establece De acuerdo con ciertas reglas, la ventana gráfica de diseño corresponde a un píxel css grande, lo que se escucha)
3. Problema de equivalencia
Sin ventana gráfica:
equivalencia, la visualización de la página es demasiado pequeña, la experiencia del usuario no es buena
Hay una ventana gráfica:
relación es igual, cada píxel css es El tamaño de pantalla real ocupado por diferentes dispositivos es el mismo.
Cada píxel css ocupa un número diferente de píxeles físicos en diferentes dispositivos (relación de píxeles).
El tamaño de pantalla real ocupado por un píxel físico es diferente en diferentes dispositivos.
