Можно ли округлить значения в CSS?Или, как решить половину / субпикселя на% переведенных макетов? - PullRequest
Новая
       39

Можно ли округлить значения в CSS?Или, как решить половину / субпикселя на% переведенных макетов?

0 голосов
/ 11 декабря 2018

У меня любопытная проблема.Я построил полноэкранный адаптивный интерфейс flex / grid.Я использовал% значения.Это работает хорошо, но иногда, случайно, изменяя размер окна, появляется линия 1 px между элементом (горизонтальный, вертикальный или оба).Я думаю, возможно, это потому, что, используя значения% и будучи жидкими элементами, размер элементов не всегда идеально-пиксельный.Посмотрите:

enter image description here

Как я мог избежать этого, сохраняя адаптивный макет?

Мне удалось добиться некоторого успеха благодаря очень небольшому масштабированиювнутренние элементы (изображения и сменные слои) похожи на scale(1.005), но все же это не всегда было идеально.Проблема в том, что браузеры не могут округлять размеры элементов в полноэкранных макетах, или что-то в этом роде, не знаю.

Просто небольшая абстракция моего исходного кода, просто чтобы добавить контекст.Это гибкий макет из 3 колонок, где 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; }
  }
}

1 Ответ

0 голосов
/ 11 декабря 2018

Итак, выясняется, что проблема была вызвана переводом 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();
...