有没有办法检测屏幕尺寸是偶数还是奇数，以便我可以根据结果制定 css 规则？

Question

我目前正在我的投资组合网站上工作，我注意到主页上有一行根据屏幕大小移动 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 规则。

Answer 1

计算 left: calc(50% - #{_size(border-width) * 1}); 可能会产生一个像素的百分比，并且会向上或向下舍入到最近的像素，从而导致未对齐。

不知道 #{_size(border-width) 在做什么，所以很难给出准确的答案。但是将 left: calc(50% - #{_size(border-width) * 1}); 换成 left: calc(50% - 0.5px); 似乎解决了我在 Chrome.

中的快速测试中的问题

有没有办法检测屏幕尺寸是偶数还是奇数，以便我可以根据结果制定 css 规则？

Is there a way to detect if a screen size is an even or odd number so that I can base a css rule on the outcome?

javascript

css

sass

media-queries

screen