Логика позади 62.5rem для максимальной ширины ряда в основании 5

Я обнаружил, что по умолчанию Foundation делает это для стилизации строки:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;
}

однако, как отзывчивая структура, почему это было бы ограничено 62.5rem? Эффект ошеломляющий, уродливый, который всегда имеет фиксированную ширину, и не может изменяться с шириной экрана. Какая логика стоит за этим? Что если я переопределю это на 100%? Это вызовет проблему с его сеткой в ​​целом?

Благодарю вас

Источник

6 ответов

Они устанавливают этот предел, потому что не каждый день у вас есть "дизайн полной ширины"; они представили (в Foundation 6) класс модификатора .expanded, которые добавляются в строки, они становятся полной ширины; Если вы хотите иметь такое поведение в Foundation 5, у вас есть два варианта:

1. Создайте свой класс.expanded

Фонд ограничивает max-width строки, так что если вы добавите .expanded класс для строк, которые вы хотите иметь жидкость и добавить код, например:

.row.expanded { max-width: none }

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

2. Изменить класс / Изменить настройки

Foundation - это довольно настраиваемый фреймворк, если вы используете версию SASS, вы можете легко изменить переменную $global-width быть на 100%. Если вы используете готовую версию, просто найдите .row объявление в коде и изменить max-width до 100%.

Вот и все, надеюсь, это поможет.

Источник

В CSS3 был введен новый модуль, изначально для определения размера шрифта, rem обозначает "root em" и относится к корню (html).

Базовое значение 16px было определено для большинства браузеров, поэтому 1rem равно 16px. Тогда вы получите, что 62.5rem равняется 1000px.

Я думаю, что width:100% Правило возможно было ошибкой обработчика для браузеров, которые не поддерживают модуль rem.

Вы можете изменить ширину строки, если хотите, для этого просто удалите или прокомментируйте правило максимальной ширины. Тогда будет делать 100%, как вы хотите. Например, Bootstrap устанавливает ширину 960 пикселей для контейнера.

В моем случае я внес изменение в правило максимальной ширины, поскольку размер моего макета должен был составлять 1366 пикселей, поэтому я превратил это значение в 85,375 мм.

.row {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 0;
     margin-bottom: 0;
     max-width: 85.375rem; // 1366px width for example
}

Взгляните на эту статью, чтобы уточнить ваше представление о rem: http://www.sitepoint.com/understanding-and-using-rem-units-in-css/

ура

Источник

62.5rem эквивалентен в фундаменте 1000px. Вы можете легко переопределить его, загрузив файл.css (который для меня является самым хорошим подходом, просто простой, полностью настраиваемый css) и в строке 126 ( фундамент 5.5.2) у вас есть:

.row {
  margin: 0 auto;
  max-width: 62.5rem;
  width: 100%;
}
Источник

Вы можете использовать медиа-запросы для этого...

Примером является

@media #{$large-up} {
   $row-width: 100%;
 }

Это ничего не "сломает". Это переменная, которую вы можете изменить по причине.

Источник

Если вы не уверены, что вы также можете запустить проект со всеми параметрами, уже установленными из настраиваемого компоновщика фундаментов: https://foundation.zurb.com/sites/download.html/

Я собираюсь начать с ширины 1200 пикселей для моего контента, например, поэтому я рассчитываю: 1200/16 = 750rem

В любом случае, это хорошая идея - удалить все компоненты, которые вы не собираетесь использовать.

Источник

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

Обычно я использую rem-calc(1200) или 100%

Источник
Другие вопросы по тегам