•  
  •  
  •  
  •  
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)
Наиболее простые техники адаптивной верстки - 5.0 out of 5 based on 1 vote

Сайты, имеющие адаптивную разметку, увеличиваются в количестве ежемесячно, а заказчиками, помимо кроссбраузерности, выставляются особые требования к адаптивности, но многими разработчиками все еще не изучаются новые техники. Но обучиться адаптивному дизайну —  просто! Эта статья имеет различные примеры того, что значит адаптивный сайт. Показана разметка разнообразных элементов веб-страниц.

1. Видео

Простейший CSS и HTML, и у вашего embed-видео появится опция масштабирования в соразмерно ширине страницы:

<div class="video">
	<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>
</div>

 

.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 обеспечивается определение максимально возможной ширины объекта. На приведенном ниже примере ширина div'а равна 800 пикселей, если есть возможность, но не более 90% ширины:

 

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

 

Адаптивный дизайн сайта позволяет заниматься масштабированием изображений:

 

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

 

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

 

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

 

Min-width — противоположна max-width, гарантирует задание минимальной ширины объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

Самые простые техники адаптивной верстки

3. Использование относительных значений

Адаптивная верстка позволяет прибегать к относительным значениям в нужных местах, что обеспечивает существенное сокращение CSS код страницы. Ниже можно ознакомиться с примерами.

Относительный margin

Таким образом, верстаются вложенные комментарии, где абсолютные значения заменяются относительным. На скриншоте видно, что второй метод гораздо читабельнее:

Самые простые техники адаптивной верстки

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

При использовании относительных значений (em или %) шрифтом наследуется также относительное значения межстрочного интервала и отступа:

Самые простые техники адаптивной верстки

Относительный padding

Скриншот позволяет убедиться в преимуществах использования относительных значений padding, которые выглядят привлекательней абсолютных:

Самые простые техники адаптивной верстки

4. Трюк с overflow:hidden

Вы можете заняться очисткой float, убрав предыдущий элемента и оставив контент в контейнере. Для этого используется overflow:hidden. Такое действие отличается полезностью при адаптивной разметке.

Самые простые техники адаптивной верстки

5. Перенос слов

При помощи CSS можно переносить непереносимые текстовые конструкции:

 

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

 

Самые простые техники адаптивной верстки

Другие статьи

  • Часто задаваемые вопросы
    06.07.2015
  • Обзор новых трендов 2015 года в веб-дизайне
    05.01.2015
  • Основы адаптивного веб-дизайна (Responsive). Каким образом сделать простой шаблон адаптивным
    12.11.2013
  • 15 примеров сайтов, на которых используется адаптивный дизайн
    20.12.2013
  • Статья-шпаргалка для запоминания размеров графических компонентов из соцсетей (Часть 1)
    13.05.2013
Портфолио
Память о Вас и Ваших близких на многие поколения
Подробнее
Прокат металла
Подробнее
Интернет-магазин кожи и меха
Подробнее
100% оригинальная парфюмерия в Москве
Подробнее
Вьетнамский ресторан премиум класса
Подробнее
Внедрение информационных систем
Подробнее
Организация международных конференций
Подробнее
Производство молочной продукции
Подробнее
Спортивный сайт
Подробнее
Интернет-магазин мебели и аксессуаров
Подробнее
Интернет-магазин электротранспорта
Подробнее
Сайт института актуальной экономики
Подробнее