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

+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 написано немало плагинов. Но как правило они либо недостаточно функциональны, либо реализуют слишком много функций, тем самым замедляя работу сайта. Если же вам просто нужно ограничить доступ к странице для определенных групп- можно обойтись парой функций темы.

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

    Категории
    События студии все
    Популярное
    Последнее