5 трюков CSS для адаптивных шаблонов

Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона - вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width, max-width, overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.

 

1. Адаптивное видео

Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

2. Минимальная и максимальная ширина

Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.

Контейнер со свойством max-width

В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.

.container {
	width: 800px;
	max-width: 90%;
}

Адаптивное изображение

Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto.

img {
	max-width: 100%;
	height: auto;
}

Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto. Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:

@media \0screen {
  img { 
  	width: auto; /* для ie 8 */
  }
}

Свойство min-width

Свойство min-width противоположно по действию свойству max-width. Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.

3. Относительные значения

В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.

Относительные поля

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

Относительный размер шрифта

С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.

Относительные отступы

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

4. Трюк со свойством overflow:hidden

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

5. Свойство word-break

Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.

.break-word {
		word-wrap: break-word;
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/EW-GPKtDA6I/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

5 трюков CSS для адаптивных шаблонов | | 2012-06-19 11:57:50 | | Статьи Web-мастеру | | Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона - вот что является настоящим искусством. В данном уроке | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: