0
304
Views¿Hay alguna manera de detectar si el tamaño de una pantalla es un número par o impar para poder basar una regla css en el resultado?
Actualmente estoy trabajando en el sitio web de mi cartera y noté que tengo una línea en la página de inicio que se mueve 1 píxel según el tamaño de la pantalla, ya sea un número par o impar.
Si el ancho de la pantalla es un número impar como 1141 px, la línea está centrada. Si es 1140px ya no está centrado.
Aquí está el css que está causando el problema.
&:before { content: ''; display: block; position: absolute; top: calc(-3.5rem - 1px); left: calc(50% - #{_size(border-width) * 1}); width: _size(border-width); height: calc(3.5rem + 1px); background: _palette(border); }En concreto es esta línea:
izquierda: calc(50% - #{_size(border-with) * 1});
El sitio web es: https://www.Kyle-Richey.com
La Línea en cuestión es la línea vertical en la parte inferior de la página entre el menú y la línea horizontal.
La primera imagen tiene un ancho de pantalla uniforme y la línea está descentrada, la segunda tiene un ancho de pantalla impar y la línea está en el centro.
Idealmente, escribiría algún código que cambiaría la regla css en función de que el ancho de la pantalla sea par o impar si eso es posible.
1 answers
Answer question0
Es posible que el cálculo left: calc(50% - #{_size(border-width) * 1}); da como resultado un porcentaje de un píxel y se redondea hacia arriba o hacia abajo al píxel más cercano, lo que provoca la falta de alineación.
Sin saber qué está haciendo #{_size(border-width) es difícil dar una respuesta exacta. pero cambiando left: calc(50% - #{_size(border-width) * 1}); a la left: calc(50% - 0.5px); parece solucionar el problema en mi prueba rápida en Chrome.