Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона - вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width, max-width, overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.
1. Адаптивное видео
Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.
03 | padding-bottom: 56.25%; |
2. Минимальная и максимальная ширина
Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.
Контейнер со свойством max-width
В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.
Адаптивное изображение
Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto.
Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto. Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:
Свойство min-width
Свойство min-width противоположно по действию свойству max-width. Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.
3. Относительные значения
В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.
Относительные поля
Ниже представлен пример комментариев, в которых относительная ширина левого поля используется для создания отступа в древовидной структуре. Вместо абсолютного значения в px используется процентное значение для следующего уровня в списке. В левой части рисунка видно, что на мобильных устройствах доступного пространства для элементов списка может стать недостаточно для нормального отображения в случае применения абсолютных значений.
Относительный размер шрифта
С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.
Относительные отступы
Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.
4. Трюк со свойством overflow:hidden
Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.
5. Свойство word-break
Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.
Немає коментарів:
Дописати коментар