Невозможно правильно настроить сетку на основе Сьюзи - PullRequest
Новая
       28

Невозможно правильно настроить сетку на основе Сьюзи

3 голосов
/ 13 февраля 2012

Я опробовал плагин Susy для Compass ( SASS ), но заметил, что он не работает так, как мне предназначено. 1007 *

Я взял index.html и screen.scss из официального руководства Susy , скомпилировал SCSS и установил его на мой сервер . Как вы можете видеть, это выглядит так, как должно (во всех браузерах, на которых я тестировал):

enter image description here

Я сделал следующее:

  • Скопируйте <article> в <div role="main"> и вставьте его шесть раз
  • В screen.scss измените диапазон столбцов (div[role="main"] > article) соответственно: с @include columns(6,9); на @include columns(1,9);

Но теперь эти новые элементы вообще не выровнены по сетке, они находятся в четко видимом пространстве. Я проверял это в последних версиях FF, Safari и Chrome, и только FF, кажется, отображает это правильно. Скриншот из Chrome:

enter image description here

Я также загрузил источник, чтобы все могли проверить здесь .

Это общая проблема с Сьюзи, что сетка неверна или я что-то делаю не так? Если первое, кто-нибудь знает обходной путь? Я тоже пробовал с процентами и пикселями, но ни один не работал.

1 Ответ

5 голосов
/ 14 февраля 2012

Сьюзи не просто еще одна система сетки, как все остальные.Он был разработан для выполнения очень специфической цели: сетки, которые жидкость внутри .Единицы, которые вы используете для создания сетки, применяются к контейнеру, а не к каждому столбцу.Все внутри построено с процентами.То, что вы видите, нормально.Это верно для всех жидкостных сеток из-за субпиксельного округления .Это не ошибка, это часть создания адаптивных веб-сайтов.

Если вам нужны сетки с точным пикселем, Сьюзи - не тот инструмент, который вам подходит.Все зависит от того, что вы пытаетесь построить.

Измените размер своего браузера, чтобы увидеть, как он работает.Вы заметите, что сетки привязываются и плавают в пределах нескольких пикселей от их направляющих, но сетка остается неизменной и никогда не вызывает горизонтальную полосу прокрутки.

Ура!

-e

...