Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?

Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?

В пк это просто грид сетка (или не грид)
В мобилке же, только серые блоки становятся слайдером, красный просто остается снизу как отдельный блок.
Есть ли разумные варианты это реализовать только через один блок или проще создавать новый?

Дополнительно:

Ну отдельный создавать не обязательно.
Инициализация слайдера будет происходить на мобильном, там же можно переносить блок в другое место.

  • Вадим, просто проблема с "Переносить блок на мобилке"
  • godsplane, JS в помощь (?)
  • display: contents в помощь
  • Ankhena, полная поддержка аж 0%
  • godsplane, попробуйте почитать дальше...
    Для ваших целей у него поддержка не хуже гридов.
  • можно в мобильном сделать позиционирование красного блока абсолютом. В пк версии грид или флекс.


    • + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?Есть ответ
      • 09.04.2024
      Ответить

      Для адаптации блока кода к мобильным устройствам, помимо создания отдельного блока специально для мобильных устройств, существует несколько альтернативных вариантов:

      1. Использование CSS медиа-запросов: Вы можете использовать CSS медиа-запросы для изменения стилей блока кода в зависимости от ширины экрана устройства. Например, вы можете уменьшить размер шрифта, убрать лишние отступы или скрыть некоторые элементы блока кода на мобильных устройствах.

      html

      @media only screen and (max-width: 600px) {
      pre[lang="php"] {
      font-size: 12px;
      padding: 5px;
      }
      }

      2. Использование CSS Frameworks: Многие CSS фреймворки, такие как Bootstrap, Foundation или Bulma, предоставляют готовые классы для адаптивного дизайна, которые можно применить к блоку кода. Например, вы можете использовать классы d-none или d-sm-block для скрытия или отображения блока кода на разных устройствах.

      html

      3. Использование JavaScript: Вы также можете использовать JavaScript для динамического изменения стилей блока кода в зависимости от размера экрана устройства. Например, вы можете добавлять или удалять классы CSS при загрузке страницы или при изменении размера окна браузера.

      html

      window.addEventListener('resize', function() {
      if (window.innerWidth < 600) {
      document.getElementById('codeBlock').style.fontSize = '12px';
      } else {
      document.getElementById('codeBlock').style.fontSize = '14px';
      }
      });

      Эти методы позволят адаптировать блок кода к мобильным устройствам без необходимости создания отдельного блока специально для мобильных устройств. Выберите подходящий вариант в зависимости от ваших потребностей и уровня комфорта с CSS и JavaScript.

      • Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?Есть ответ
      • 07.04.2024
      Ответить

      Для адаптации блока кода на мобильных устройствах, помимо создания отдельного блока специально для мобильной версии, существует несколько альтернативных подходов. Один из таких способов - использование адаптивного дизайна.

      Адаптивный дизайн позволяет сайту автоматически адаптироваться к различным разрешениям экрана, включая мобильные устройства. Для того чтобы сделать блок кода адаптивным, можно использовать CSS медиа-запросы. Например, можно задать ширину блока кода в процентах или em, чтобы он масштабировался в зависимости от размера экрана.

      Пример использования CSS медиа-запросов:

      Таким образом, при ширине экрана менее 600px ширина блока кода будет автоматически уменьшаться до 100%. Это позволит сохранить читаемость кода на мобильных устройствах.

      Кроме того, можно также использовать специальные библиотеки и плагины, которые автоматически делают блоки кода адаптивными. Например, библиотека Prism.js имеет встроенную поддержку адаптивного дизайна и может быть легко настроена для работы на мобильных устройствах.

      Таким образом, помимо создания отдельного блока для мобильной версии, существуют и другие способы адаптации блока кода к различным устройствам, что позволяет улучшить пользовательский опыт на мобильных устройствах.

    Оставить комментарий