Как это сверстать с учётом мобильной версии?
Всем доброго времени суток, не могу понять как сверстать линии с кругляшками так чтобы при адаптации всё было норм, чтобы линии были строго через определенное количество строк, 1 строка сразу идёт линия далее через 2 строки такой нижний бордер, думал сделать через position absolute как-то но тут фишка в том что у этого текста редактируется line-height и получается надо будет как-то ещё высчитывать отступ у каждого такого бордера
Дополнительно:
Линии идут через каждые две строки. То есть это просто фоновая картина с повторением через 2em
- можно и без картинок обойтись, градиентами. Но будет сложнее для понимания.
- Сергей delphinpro, а прикол, em - relative to the font-size of the element (2em means 2 times the size of the current font) получается em подстроиться под мой line-height? line-height у меня может динамически меняться
- sharpsss, градиентами https://jsfiddle.net/Ankhena/n5b97ovh/
Старая песочница, придется смотреть через vpn, если вы в России или РБ.
Сейчас расчеты можно упростить за счет кастомных свойств. - sharpsss,
получается em подстроиться под мой line-height?
да
- Сергей delphinpro, эхх, жаль эта картинка должна иметь возможность динамически менять толщину и цвет линии а также толщину и цвет кругляшка по отдельности, всё что в голову приходит это сделать релатив блок с текстом а в него запихнуть абсолют контейнер height/width 100% для этих линий с крушляшками, далее получать высоту релатив блока с текстом и рендерить в абсолютный контейнер эти линии и кругляшки до тех пор пока они не будут превышать высоту релативного блока с текстом, звучит запарно, сижу мучаюсь пытаюсь что то попроще придумать
- sharpsss,
получается em подстроиться под мой line-height?
Нет.
line-height у меня может динамически меняться
Ну так и расчёты меняйте, всё равно же уже скрипт придётся использовать для этого изменения.
Чтоб оно на лету в css считалось и менялось без задержек, можете скриптом только переменную менять, типа .style.setProperty('--line-height', lineHeight), а всё остальное уже в css через var(--line-height) и calc. - Aetae, спасибо, да я понимаю, так и делаю кстати )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сверстать сайт с учетом мобильной версии, следует применить подход адаптивного дизайна (responsive design). Адаптивный дизайн позволяет сайту автоматически адаптироваться к различным размерам экранов устройств, включая мобильные устройства.
Для начала, необходимо использовать медиа-запросы (media queries) в CSS. Медиа-запросы позволяют указать стили, которые будут применяться в зависимости от размера экрана. Например, для разных размеров экранов можно задать разное количество колонок, размер шрифта, отступы и т.д.
Пример использования медиа-запросов в CSS:
/* Стили для десктопной версии */ .container { width: 960px; margin: 0 auto; } /* Стили для мобильной версии */ @media only screen and (max-width: 768px) { .container { width: 100%; padding: 10px; } }
Кроме того, следует использовать относительные единицы измерения, такие как проценты или em, вместо абсолютных пикселей. Это позволяет элементам на странице масштабироваться в зависимости от размера экрана.
Также важно учитывать порядок элементов на странице и их взаимодействие на мобильных устройствах. Например, кнопки или ссылки должны быть достаточно большими для удобного нажатия пальцем.
Наконец, для тестирования мобильной версии сайта можно использовать инструменты разработчика в браузерах, такие как инструменты разработчика в Chrome или Firefox, которые позволяют эмулировать различные размеры экранов мобильных устройств.
С учетом вышеперечисленных рекомендаций, вы сможете сверстать сайт таким образом, чтобы он корректно отображался на мобильных устройствах и обеспечивал удобство использования для пользователей.