是否可以在css中舍入值？或者，如何解决 % 已翻译布局上的半像素/子像素？答案

【问题标题】：Is it possible to round values in css? Or, how to solve half/sub-pixels on % translated layouts?是否可以在css中舍入值？或者，如何解决 % 已翻译布局上的半像素/子像素？
【发布时间】：2019-05-12 04:20:52
【问题描述】：

我有一个奇怪的问题。我构建了一个 flex/grid 全屏响应式界面。我使用了 % 值。它工作正常，但有时，通过调整窗口大小，在项目（水平、垂直或两者）之间出现一条 1 px 的线。我认为这可能是因为，使用 % 值并作为元素流动，项目大小并不总是完美像素。看：

我怎样才能避免这种情况，仍然保持响应式布局？

我通过很少缩放像scale(1.005) 这样的内部元素（图像和翻转层）来设法做到了一些好，但它仍然并不总是完美的。问题是浏览器不能在全屏布局上舍入元素大小，或者类似的东西，不知道。

只是对我的原始代码进行了一点抽象，只是为了添加上下文。这是一个 3 列的 flex 布局，其中 1 列是 50% 宽度（第三列在屏幕外 > 整体表现得像 3 个面板的“幻灯片”）。第二列，本身包含图片上的网格：

/* HTML */

<div class="sections-list">
  <div class="section column-1"></div>

  <div class="section column-2">
    <div class="grid">
      <button type="button">a</button>
      <button type="button">b</button>
      <button type="button">c</button>
      <button type="button">d</button>
    </div>  
  </div>

  <div class="section column-3"></div>
</div>


/* SCSS */

.sections-list{
  display: flex;
  justify-content: flex-start;
  min-height: 100vh;

  translateX(-50%);
}

.section{
  flex-grow:1;
  min-width: 50%;
  box-sizing:border-box;
  min-height: 100vh;
}

.grid{
  display: grid;
  height: 100%;
  grid-template:
    "a   b" 50%
    "c   d" 50%
    / 50% 50%;

  button{
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    min-width: none;
    max-width: none;
    height: auto;

    &:nth-child(1){ grid-area: a; }
    &:nth-child(2){ grid-area: b; }
    &:nth-child(3){ grid-area: c; }
    &:nth-child(4){ grid-area: d; }
  }
}

【问题讨论】：

您能否将 JS Fiddle 添加到其中，以获得更好的说明。
@Joykal，老实说，在这种情况下，我认为 js fiddle 没有任何帮助，因为它缺乏完整的上下文。您有上面的代码和照片，也是该错误的主要原因。唯一缺少的是答案。无论如何，这是你的小提琴：jsfiddle.net/stratboy/pcwudrmc/72774
在您的小提琴中，不会出现这样的差距（Safari 12、MacOS Mojave）。您确定您使用的图像中可能没有白线吗？请注意安全，因为小白线在某些尺寸下是不可见的，但在其他尺寸下是可见的。你的小提琴的纯色不显示线条......
我就是这么说的。小提琴不会有用的。这是一个半像素渲染问题的案例。可能是由于一些translate 转换。我不知道如何让浏览器使用全像素大小。也许我会求助于使用一点 js。
也许什么都不做，1px真的是个大问题吗？我不这么认为，添加一些背景来隐藏它

标签： css responsive translate-animation

【解决方案1】：

所以，问题是由主要元素的 50% 翻译引起的。当window.width 为奇数时，这会导致一半像素。

我的解决方案是使用一点 javascript、css --properties 和旧版浏览器的后备来重新计算和舍入翻译。这是一些简化的代码（也请查看原始代码）：

:root{
  --half-window: -50%;
}

.sections-list{
  display: flex;
  justify-content: flex-start;
  min-height: 100vh;

  transform: translatex(-50%); // legacy
  transform: translatex(var(--half-window));
}

然后：

function round_half_window(){
  document.documentElement.style.setProperty('--half-window', -Math.round($(window).width()/2) + 'px');
}

$window.resize(_.debounce(function(){ round_half_window(); },500));
round_half_window();

【讨论】：