
У опытного верстальщика верстка адаптивного макета вряд ли вызовет затруднения, но новички часто сталкиваются с неочевидными проблемами. В данной статье я опишу некоторые моменты, с которыми сталкивался сам.
Для представления табличных данных нет инструмента лучше таблицы. Что и понятно, для этого они и создавались. Но, как известно, минимальная ширина таблицы определяется содержимым и в большинстве случаев это будет гораздо больше минимальной ширины экрана. Естественно результатом будет горизонтальная прокрутка на сайте, чего допускать никак нельзя. Есть несколько вариантов решения этой проблемы:
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
.
Это лишь малая часть того, с чем может столкнуться верстальщик при верстке адаптивного макета. Но перечисленные моменты встречаются чаще всего.
Комментарии ()