Для настройки границ (border) так, чтобы их толщина менялась в зависимости от размеров устройства (ширины экрана на компьютере и высоты на смартфоне), можно использовать медиазапросы (media queries) в сочетании с относительными единицами измерения (например, `vw` для ширины и `vh` для высоты).
В вашем примере на CodePen, чтобы сделать блоки `workplan__step` гибко адаптируемыми, можно использовать следующий подход:
1. Заменить фиксированные размеры на относительные (например, использовать проценты `%` для ширины и `em`/`rem` для внутренних отступов).
2. Для границ использовать относительные единицы `vw` на широких экранах и `vh` на узких.
3. Применить медиазапросы для адаптации стилей под различные разрешения экрана.
Пример CSS с использованием медиазапросов и относительных единиц для класса `workplan__step`:
```css
.workplan__step {
/* Относительный отступ и ширина */
padding: 1em;
width: 100%;
/* Начальная толщина границы */
border: 1vw solid black;
}
@media (min-width: 768px) {
/* Для планшетов и десктопов */
.workplan__step {
/* Меньше толщина для границы на широком экране */
border-width: 0.5vw;
}
}
@media (max-width: 767px) {
/* Для мобильных устройств */
.workplan__step {
/* Толщина границы на узком экране */
border-width: 1.5vh;
}
}
```
Этот код устанавливает толщину границы блока `workplan__step` равной 1% от ширины вьюпорта (`1vw`) для всех устройств. Затем, когда ширина экрана больше 767 пикселей (что обычно соответствует планшетам и десктопам), толщина границы уменьшается до `0.5vw`. На экранах меньше 768 пикселей (мобильные устройства), толщина границы увеличивается до `1.5vh`, что означает 1.5% от высоты вьюпорта.Эти значения можно подобрать экспериментально, подстраивая под конкретный дизайн и потребности интерфейса.
Используя этот метод, вы можете добиться, чтобы границы элемента изменялись динамически и соответствовали размеру экрана устройства. Не забывайте также тестировать верстку на разных устройствах и при разных разрешениях экрана, чтобы гарантировать корректность отображения.
