Проблемы с использованием bootstrap с rem = 10px
Я использую Bootstrap 4 в своем проекте. Я также начинаю использовать rem в качестве единицы длины. Я установил rem = 10px, чтобы легко преобразовать px в rem, что, как я считаю, является стандартной практикой. Но это делает все настройки Bootstrap по умолчанию непригодными для использования (т.е. слишком маленькими). Это происходит потому, что Bootstrap начал использовать rem вместо px.
Поэтому, если я устанавливаю свой rem = 10px, мне приходится вручную стилизовать каждый элемент, даже кнопки, потому что все элементы становятся слишком маленькими.
В качестве примера:
Для .lead значение font-size равно 1,25rem = 12,5px. Это слишком мелкий текст.
Мне просто интересно, что разработчики, которые используют Bootstrap в своем проекте, используют ли они rem или px в качестве единицы длины. Если rem, это 10px или 16px?
Обновлено: добавление изображения, чтобы сделать его более четким
Надеюсь, это не глупый вопрос.
Добавьте пример кода в свой CSS, где это проблема, лучший ответ может быть предоставлен, когда у вас есть вариант использования, о котором вы говорите.
@Jake Спасибо за отзыв. Добавил картинку.
Ответы 4
Одним из недостатков использования предварительно созданной библиотеки css является то, что вы должны придерживаться их соглашений, если вы не хотите переписывать части их кодовой базы.
В этом случае я считаю, что для начальной загрузки используется стандартный 16px = 1rem, и, как вы сказали, если вы хотите использовать другую базовую единицу, вам придется переназначить все значения начальной загрузки по умолчанию.
Вы правы насчет недостатка. Я просто хочу знать, как разработчики это обходят. Они перестают использовать rem с начальной загрузкой? или они оставляют 16px?
Я бы сказал, что если вы настроены на использование начальной загрузки, используйте 16 пикселей в качестве базовой единицы.
Только Bootstrap 4: Одно, не очень хорошее решение, которое приходит мне в голову, - это создать переменные css и использовать их повсюду, полностью отказавшись от
rem.:root{ --custom-rem: 10px; }SCSS с бутстрапом 4: если вы используете SCSS, напишите функцию, которая будет принимать px в качестве входных данных и преобразовывать их в rem. Таким образом, вы можете уйти с rem = 16px.
@function remy($pxsize) { @return ($pxsize/16)+rem; }.myclass{ margin-right: remy(10);; }
PS: Я почему-то не могу форматировать код.
Это что-то вроде одного (у)
px не является надежным устройством для разных устройств, так как DPI различается. Вот почему Bootstrap использует rem. Это не первая их попытка реализовать rem в качестве общей единицы интервала, но в прошлом они отказались от поддержки из-за отсутствия поддержки в устаревших браузерах. Похоже, это больше не проблема ...
Bootstrap 3 использовал font-size: 10px; на <html>, чтобы установить 1rem = 10px.
Bootstrap 4 использует font-size: 16px; на мобильных устройствах и font-size:14px на устройствах большей или большей плотности.
См. Еще несколько мнений в это обсуждение.
Я думаю, что реальный ответ здесь - установить базовый rem на 10 пикселей в html, а затем изменить bootstrap var $ font-size-base на 1.6rem, и все эти проблемы исчезли.
Я иногда использую
em, поскольку он масштабирует заголовки относительно области просмотра. Сpxон может сделать размер текста заголовка и абзаца непропорциональным для разных размеров экрана.