Вы говорите о двух разных вещах: то, как это выглядит в дизайн-программе и то, как это выглядит в реальных движках браузеров.
Конечно там будут различия — в отступах, в размере шрифтов, в методе рендеринга шрифтов, в межбуквенном пространстве, в реальной высоте строки (внутренней высоте строки шрифта) и т. д.
P. S. calc(55px - ((46px - 26px) / 2)) — не слишком ли это для расчёта отступа? :)) Можно вообще высоту строки и шрифта вгонять в переменные и получить универсальный класс с калькуляцией этого всего, но зачем это надо…
Там проблема следующая: CSS-стили контролируют поведение и переключение слайдера там, где они этого делать не должны. Нормальный скрипт создаёт родительский контейнер, который он с помощью translateX перемещает для смещения позиции слайдера на основе общего количества слайдов и их количества на одном экране.
В вашем примере используются классы, относительные селекторы и т. п. для этого дела. Неудивительно, что это всё сломается, стоит только тронуть. Посмотрите, на исходники Swiper: там CSS отвечает только за внешний вид кнопок, слайдов, буллитов (тени и тому прочее) — и это правильно.
Update. Наверное, они хотели сделать забавный эффект смещения предпоследнего слайда при прокрутке в обратную сторону, но сделали это с помощью CSS. Не совсем в этом вопросе правильное решение.
Владимир, просто это малоконтроллируемая единица, когда дело доходит до таких вещей, что может сыграть злую шутку, если вы не предусмотрели нужные брекйпоинты и т. п.
Лучше сразу предусмотреть возможные проблемы и придерживаться общемировых практик. Я, к примеру, тоже не понимал до поры до времени сути использования rem/em для шрифтов. Не понимал, почему крупные проекты стремятся перейти к ним.
lumb, поверьте, я не имею ничего против Bootstrap'a, когда дело доходит до CSS. Да, я не использую его, но он не так плох, это факт.
Но то ли дело — скрипты, которые включены в его состав. Они несовременные и полу-костыльные. На загрузку Swiper или Slick ваши пользователи потратят не так много времени (даже очень мало), зато получат быстрый и хороший слайдер, а вы — возможность легко и без проблем создавать такие вещи, не боясь, что что-то у вас сломается при малейшем обновлении CSS-фреймворка.
Плюс, не факт, что скрипт для слайдера из Bootstrap инициализируется быстрее того же Slick. В конечном итоге, в силу оптимизации Slick может отразиться быстрее, чем Bootstrap'овская шняга.
lumb, детство в жопе — использовать слайдер Bootstrap'a, который даже свайп нормально не поддерживает. Используйте нормальный плагин, к примеру, Swiper или Slick — и будет у вас нормальный и независимый от Bootstrap'a плагин карусели/слайдера для всего и вся.
Вы существуете? Я понимаю, когда нужно добиться эффекта вёрстки для печати, когда контент полной страницы нужно уместить на размер экрана любого устройства, но для обычного сайта по типу Toster…
Это не адаптивность, это безумие.
P. S. Зачем менять значения в каждом теге? Достаточно прописать всё в rem и менять в теге body.
Конечно там будут различия — в отступах, в размере шрифтов, в методе рендеринга шрифтов, в межбуквенном пространстве, в реальной высоте строки (внутренней высоте строки шрифта) и т. д.
P. S. calc(55px - ((46px - 26px) / 2)) — не слишком ли это для расчёта отступа? :)) Можно вообще высоту строки и шрифта вгонять в переменные и получить универсальный класс с калькуляцией этого всего, но зачем это надо…