Я только что видел эту проблему, работая над моим проектом.В настоящее время я использую Foundation 6 для внешней части.
Размер основного текста по умолчанию для дизайна - 14px (не 16px), поэтому мне пришлось установить его в теге html следующим образом:
html {
font-size: 87.5%;
}
так, в основном с таким шаблоном:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-6">
<p>Col 6</p>
</div>
<div class="cell small-6">
<p>Col 6</p>
</div>
</div>
</div>
Макет отлично работает в Chrome, но он не работает в Firefox.Это немного странно, потому что он должен нормально работать в кросс-браузерах.
К вашему сведению, удаление класса grid-margin-x сделает макет нормальным в Firefox, но это не главное, потому что мне нужны промежутки между столбцамив проекте моего проекта.
Я пытался переместить селектор font-size: 87.5%; на body и оставить html на 100%.Это будет работать как на Firefox, так и на Chrome. Но возникает другая проблема, например, при использовании размера шрифта с использованием модуля rem. Я также считаю, что это не оптимальное решение, поскольку я использовал модуль rem для всего своего текста.
Я сделалдемонстрация, иллюстрирующая мою точку зрения о том, что font-size: 87.5%; на body не является правильным решением, является
body {
font-size: 87.5%;
@media screen and (max-width: 1024px) {
font-size: 100%;
}
}
.t1 {
font-size: 1rem;
}
. Когда я проверяю класс .t1, я предполагаю 1rem = 14px, но на самом деле это не так, это 16px .Оказалось, что это сделает все мои размеры шрифта, используя базовый размер по умолчанию 16px.В моем проекте я могу пересчитать это значение с помощью миксина SCSS, но мне кажется, что это хак.
Итак, просто интересно, есть ли какое-то решение для этого, я открыт для любых предложений.
Заранее спасибо,
Демо-ссылка: https://codepen.io/DieByMacro/pen/zbrWwZ