有没有办法检测屏幕尺寸是偶数还是奇数，以便我可以根据结果制定 CSS 规则？
我目前正在开发我的作品集网站，我注意到主页上有一条线，根据屏幕尺寸的偶数或奇数移动 1 像素。
如果显示宽度是奇数（例如 1141px），则该线居中。如果是 1140px，则不再居中。
这是导致问题的 css
&: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);
}
具体是这一行：
left: calc(50% - #{_size(border-width) * 1});
网站是：https://www.Kyle-Richey.com
所讨论的线是页面底部之间的垂直线菜单和水平线。
第一个图像的显示宽度为偶数且线偏离中心，第二个图像的显示宽度为奇数且线位于中心。
理想情况下，如果可能的话，我会编写一些代码来根据显示宽度是偶数还是奇数来更改 css 规则。
I am currently working on my portfolio website and I have noticed that I have a line on the home page that moves by 1 pixel based on the screen size being an even or odd number.
If the Display width is an odd number like 1141px the line is centered. If it is 1140px it is no longer centered.
Here is the css that is causing the issue
&: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);
}
Specifically it is this line:
left: calc(50% - #{_size(border-width) * 1});
Website is: https://www.Kyle-Richey.com
The Line in question is the vertical line at the bottom of the page between the menu and horizontal line.
The First image is of an even display width and the line is off center, the second is an odd display width and the line is center.
Ideally I would write some code that would change the css rule based on the display width being even or odd if that is possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
计算
left: calc(50% - #{_size(border-width) * 1});可能会得出像素的百分比，并且会向上或向下舍入到最接近的值导致未对齐的像素。不知道
#{_size(border-width)正在做什么，很难给出准确的答案。但将
left: calc(50% - #{_size(border-width) * 1});交换为left: calc(50% - 0.5px);似乎修复了我在 Chrome 中的快速测试中的问题。It's possible that the calculation
left: calc(50% - #{_size(border-width) * 1});is resulting in a percentage of a pixel and that get's rounded up or down to the nearest pixel causing the miss alignment.Not knowing what
#{_size(border-width)is doing it's hard to give an exact answer.but swapping
left: calc(50% - #{_size(border-width) * 1});toleft: calc(50% - 0.5px);appears to fix the issue in my quick test in Chrome.