Некоторые сложности адаптивной верстки

+26



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

Адаптирование таблиц

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

1) Самый простой, но не самый красивый. Положить таблицу в блок и задать свойству блока overflow значение auto. Таким образом, если таблица шире максимальной ширины содержимого, горизонтальная прокрутка появится внутри этого блока. 
Пример:



2) Смена типа отображения на блочный с помощью медиа запросов.
Подобрать разрешение нужно опытным путем. Не очень простой метод, но смотрится неплохо. Хорошо подходит для отображения таблиц с товарами или корзины. Привожу ниже не самый примитивный пример, в нем используется свойство attr, оно позволяет нам указывать название колонки в атрибуте ячейки.

Код с комментариями:


3) Использовать плагин Footable, результат его работы похож на метод выше, но возможности обширны. Можно применить смену положения только к некоторым ячейкам, свернуть группы в заголовки, подключить компоненты фильтрации, сортировки, пагинации, и многое другое. Советую ознакомиться с возможностями данного плагина.


Масштабирование изображений

Казалось бы, какие проблемы могут возникнуть с изображениями? Ведь с изменением ширины пропорционально меняется и высота. Но что если на адаптиве размер изображения должен отличаться от соответствующей пропорции? Кроме замены самого изображения, можно поступить следующим образом:

1) Установить изображение в качестве фона блока и задать свойству background-size значение cover, таким образом изображение масштабируется до размеров блока с сохранением пропорций. Размер блока установить вручную с помощью width/height или использовать в качестве распорки прозрачную картинку соответствующих пропорций (но тогда содержимое блока нужно размещать абсолютным позиционирование).

2) Задать размеры изображению и установить свойству object-fit значение cover. Не сработает в IE.

Порядок элементов

Очень часто в мобильных версиях страницы порядок расположения блоков отличается от десктопной версии. Если речь идет о двух рядом стоящих блоках, то можно обойтись свойством float и сменой его направления. Но как быть если элементов много? Здесь на помощь приходит flexbox и свойство order.

Можно указать абсолютно любой порядок:


Перенос строк в нежелательном месте

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

Также строка может переноситься в месте дефиса. Например телефонный номер, не поместившись в одну строку, будет разбит на две, что не очень красиво. Чтобы этого избежать можно воспользоваться CSS свойством white-space: nowrap.

 

Это лишь малая часть того, с чем может столкнуться верстальщик при верстке адаптивного макета. Но перечисленные моменты встречаются чаще всего.

Понравилась статья? Поделись с друзьями:
Читайте также
Анимация
Анимация "Созвездие"
Пошаговое создание анимации
Поле для загрузки аватара
Поле для загрузки аватара
В данной статье рассказывается как добавить поле загрузки аватара в профиль пользователя не используя плагины. И не убирая при этом возможность использования граватаров.
Разграничение доступа без плагинов
Разграничение доступа без плагинов
Для разграничения доступа в Wordpress написано немало плагинов. Но как правило они либо недостаточно функциональны, либо реализуют слишком много функций, тем самым замедляя работу сайта. Если же вам просто нужно ограничить доступ к странице для определенных групп- можно обойтись парой функций темы.

Комментарии ()

    Категории
    События студии все
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    01 Января 2021
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    Наступил Новый 2021 год! Очень надеемся на то, что он будет лучше прошлого, отступит коронавирус, восстановится экономика, справится малый и средний бизнес, а государство поможет ему в этом реальной помощью!
    318 просмотров
    подробнее
    Популярное
    Последнее