Este es un problema antiguo. Cuando lo noté por primera vez, fue un diseñador de interfaz de usuario quien vino a molestarme. Bueno, acababa de ingresar al lugar de trabajo de front-end y no entendía nada. :
El diseñador se acercó con su teléfono móvil: estos bordes son gruesos, mi borrador de diseño es de 1 px.
I:? ? ? ? Lo que escribí es 1px. Si no lo crees, echa un vistazo. (Mientras hablaba, sacó el código CSS.
Diseñador: En mi opinión, eso no está bien, el borde es mucho más grueso que el de mi diseño. Se ve raro (emmm, está muy pixelado.
Yo: Entonces lo cambiaré a 0.5px y podrás echarle un vistazo (cambié el código mientras hablaba
El diseñador lo miró y asintió, de hecho era mucho mejor.
Más tarde, se descubrió que el mismo código era problemático en algunas máquinas con Android, lo que hacía que la línea de 0,5 px fuera invisible.
Es extraño. Obviamente, cambiarlo a 0,5 px no resolverá el problema, pero el borde de 1 px parece mucho más grueso que el borrador del diseño.
Rendimiento del borde de 1pxUtilizo css directamente para establecer el borde de 1px.
HTML:
<ul class=rayas> <li>1</li> <li>2</li></ul>
CSS:
* {margen: 0; relleno: 0;} ul, li{estilo de lista: ninguno;} .hairlines {ancho: 300px; margen: 100px auto; -bottom: 1px solid #cccccc; // Establece el borde en 1px }La captura de pantalla obtenida es la siguiente:
Parece mucho más grueso que el borrador del diseño. El borrador del diseño debería verse así. Puedes compararlo:
Solución 1: pseudoclase + transformaciónCon la mentalidad de resolver el problema, aunque no pensé claramente en el motivo en ese momento, todavía encontré soluciones relevantes usando border-image o box-shadow, que también pueden simular el efecto deseado. Efecto de borde de 1px, pero personalmente creo que no es una solución universal ni convencional.
La elección final fue utilizar el método de pseudoclase + transformación: el principio es eliminar el borde del elemento original, luego usar: antes o: después para rehacer el borde y reducir la escala de la transformación a la mitad. El elemento está posicionado relativamente y el nuevo borde está posicionado absolutamente.
html igual que arriba
El CSS es el siguiente:
* {margen: 0; relleno: 0;} ul, li{estilo de lista: ninguno;} .hairlines {ancho: 300px; margen: 100px auto; : 10px; } .hairlines li:después{ contenido: ''; posición: absoluta izquierda: 0 abajo: 0; #cccccc; ancho: 100%; alto: 1px; -webkit-transform: escalaY(0.5); transformación: escalaY(0.5); -webkit-transform-origin: 0 0;En este caso, las líneas dibujadas son mucho más delgadas. Generalmente utilicé el método anterior para resolver el problema del borde de 1 px durante un año, pero después de usarlo, descubrí varios problemas:
1. ¿Por qué la escala Y (0,5)? ¿Cómo conseguiste este 0,5? ¿Es necesario reducir todos los modelos a la mitad? En otras palabras, ¿son universales?
2. ¿Qué pasa si quiero dibujar los cuatro bordes de un contenedor al mismo tiempo?
3. ¿Admite bordes con esquinas redondeadas?
La solución a los dos últimos problemas se puede encontrar modificando el código anterior (para facilitar la visualización del efecto, pongo el efecto obtenido mediante escritura normal y el efecto obtenido mediante pseudoclases juntos, para que sea más fácil para ver la diferencia):
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=escala-inicial=1, escala-máxima=1, escala-mínima=1, escalable por el usuario =no, ancho=ancho del dispositivo> <título>Problema de borde de 1px en el terminal móvil</título> <estilo> * { margen: 0; 0; ul, li{ estilo de lista: ninguno; } .lines { ancho: 200px; margen: 0 auto; } .lines li { borde: 1px sólido #cccccc; alto: 50px; -arriba: 10px; } .hairlines { ancho: 200px; margen: 0 auto; 3px; } .hairlines li{ altura: 50px; altura de línea: 50px; borde: ninguno; alineación de texto: posición: relativa; : absoluto; izquierda: 0; arriba: 0; borde: 1px sólido #cccccc; ancho del borde: 26px; 200%; altura: 200%; -webkit-transform: escala(0.5); transformación: escala(0.5); -webkit-transform-origin: izquierda arriba; transformación-origen: izquierda arriba; ><body>Líneas gruesas<ul class=lines> <li>1</li> <li>2</li></ul>Líneas finas<ul class=hairlines> <li>3</li> <li>4</li></ul></body></html>La representación resultante es la siguiente:
El borde de abajo es obviamente mucho más delgado, más cercano al borrador del diseño.
Entonces 1. ¿Por qué la escala Y (0,5)? ¿Cómo conseguiste este 0,5? ¿Es necesario reducir todos los modelos a la mitad? En otras palabras, ¿son universales? ¿Cómo responder a esta pregunta?
Esto nos devuelve a la esencia del problema. ¿Por qué todavía parece mucho más grueso de lo habitual aunque haya escrito 1px en el CSS?
Después de verificar la información, resulta que los píxeles configurados en el CSS no corresponden uno a uno a los píxeles del dispositivo. Esto significa que si especifico 1 px en el CSS, es posible que lo que veo en el teléfono móvil no sea el mismo. ser un píxel. El ancho ocupado por el punto.
El píxel de CSS es un concepto abstracto y relativo. En diferentes dispositivos y entornos, los píxeles físicos representados son diferentes. En los dispositivos más antiguos, la densidad de píxeles de la pantalla es relativamente baja, un píxel de 1 px es físico. píxel, pero la tecnología se está desarrollando rápidamente. Las pantallas de los teléfonos móviles actuales son todas de alta resolución. Si el tamaño no cambia, una pantalla se llenará con más píxeles. En este momento, corresponderá a un píxel CSS (generalmente llamado píxel lógico). múltiples píxeles físicos.
Entonces, ¿a cuántos píxeles físicos corresponde el ancho de un píxel CSS?
Esto requiere mencionar devicePixelRatio (proporción de píxeles del dispositivo)
devicePixelRatio = píxel físico/píxel independiente en el dispositivo, que se puede obtener a través de window.devicePixelRatio. Esta proporción de píxeles puede describir exactamente cuántos píxeles físicos corresponden al ancho de píxel de un CSS, que en realidad corresponde a los píxeles de devicePixelRatio.
Cuando el atributo de escala inicial de la ventana gráfica es 1, el tamaño de la página es normal, pero cuando la escala inicial es 0,5, la página se reduce 1 veces. Un dispositivo con devicePixelRatio de 2 originalmente tiene un ancho de píxel CSS de 1 que representa 2. anchos de píxeles físicos Después de la reducción, el ancho de 1 píxel CSS solo ocupa 1 píxel físico, es decir, se logra un verdadero píxel físico.
Solución 2: rem + ventana gráficaEn este punto, la solución es muy clara: podemos obtener el devicePixelRatio del dispositivo en tiempo de ejecución y cambiar dinámicamente la escala inicial de la ventana gráfica a 1/devicePixelRatio, para garantizar que el ancho de 1px sea el 1 píxel físico real. ancho. Use rem para otras adaptaciones (porque si usa px, se reducirá)
El código es el siguiente:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=escala-inicial=1, escala-máxima=1, escala-mínima=1 , escalable por el usuario = no, ancho = ancho del dispositivo>--> <título>Problema de borde de 1px en el terminal móvil</título> <script> (función () { var clientWidth = window.screen.width; var dpr = window.devicePixelRatio; var vp = document.createElement('meta'); document.documentElement.style.fontSize = clientWidth > '20px': 20 * dpr * clientWidth / 360 + ' px'; vp.nombre = 'ventana gráfica'; `escala-inicial=${1.0 * 1/dpr}, escala-máxima=${1.0 * 1/dpr}, escala-mínima=${1.0 * 1/dpr}, escalable por el usuario=no, ancho=dispositivo- ancho`; var m = document.getElementsByTagName('meta')[0]; })(); </script> <estilo> * { margen: 0; relleno: 0; ul, li{ estilo de lista: ninguno } .lines { ancho: 10rem; { borde: 1px sólido #cccccc; altura: 2,5rem; altura de línea: 2,5rem; alineación de texto: centro; 0,6rem; margen superior: 0,5rem } </style></head><body><ul class=lines> <li>1</li> <li>2</li></ul></ cuerpo></html>El efecto obtenido se puede ver en la siguiente imagen (es más evidente cuando se ve en un teléfono móvil):
Desde el punto de vista anterior, volviendo a las preguntas anteriores, 1. ¿Por qué la escala Y (0,5)? ¿Cómo conseguiste este 0,5? ¿Es necesario reducir todos los modelos a la mitad? En otras palabras, ¿son universales? De hecho, no es necesariamente 0,5. En un dispositivo con un dpr de 3, en realidad debería ser 0,3333... No es universal porque el dpr de cada teléfono móvil puede ser diferente. Sin embargo, el 0,5 en el método 1 es generalmente. al menos más delgado que 1px, por lo que casi puede cumplir con los requisitos del diseñador.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.