Працягваем адаптаваць!

Сення мы разглядзім як адаптаваць кантэнт сайту. Глядзім дэма тут. Будзем адаптаваць:
video – каб адаптаваць відэа, трэба змясціць яго ў кантэйнер з спецыфічнымі css правіламі.
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
Само відэа, звычайна падключаецца праз тэгі iframe, object ці embed Таксама дададзім ім ўласцівасці.
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Усе зараз проста змяшчаем відэа ў кантэйнер і натхняемся
        <div class="video-container">
<iframe src="http://www.youtube.com/embed/OlA9-bdFq1I" frameborder="0" allowfullscreen></iframe>
</div>
Калі вы хаціце абмежаваць памеры відэа(напрыклад каб яно не вылазіла за шырыню 600px), проста дадаем яшчэ адзін блок.
.video-wrapper {
	width: 600px;
	max-width: 100%;
}
і туды ўкладаем наш кантэйнер:
    <div class="video-wrapper">
<div class="video-container">
<iframe src="http://www.youtube.com/embed/OlA9-bdFq1I" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Max-width – усталёўвае максімальную шырыню элемента, Напрыклад, зробім кантэйнер які займае 600px калі магчыма, калі немагчыма толькі 90% ад бацькі.Камбінацыя ўласцівасцей width і max-width дае патрэбны вынік:
.container {
	width: 600px;
	max-width: 90%;
}
Image – 2 радкі і мы адаптавалі малюнак.
img {
	max-width: 100%;
	height: auto;
}
Min-width – задае мінімальную шырыню, напрыклад для палей формы, зручна задаць мінімальную шырыню, далей за якую форма не звузіцца. Css:
form {
    min-width:450px;
}
form input {
    max-width: 100%;
    }
Html:
<form>
<input type="text">
</form>
Адносныя водступы. – проста задавайце margin у % замест px. Тое ж самае(задаем у %) і пра padding: Адносны шрыфт – мы ведаем што элементы бяруць памер шрыўта ў спадчыну ад бацькі. Таму мы проста даем патрэбнае значэнне font-size у элемента html. Напрыклад, для шырыні браўзера больш за 1367px – шрыфт 120%, ад 768 да 1366 – 100%, для смартфонаў ніжэй за 768px – 80%.
/* Large desktop */
@media (min-width: 1367px) {
html {
font-size: 120%;
}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
html {
font-size: 100%;
}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
html {
font-size: 80%;
}
}
Глядзім: Overflow:hidden – у нас ёсць малюнак float:left і ёсць div з тэкстам, і мы хочам захаваць герархію і пазбавіцца абцекання тэкстам малюнка. Выстаўляем div ўласцівасць overflow: auto.
    img {
        float:left;
    }
    div.text-container {
         overflow:auto;
    }
Word-break Бывае слова мае вялікую дліну(напрыклад url) і вылазіць за блок. Проста выставім блоку ўласцівасць word-wrap: break-word; Выглядае так:

Занятак быў падрыхтаваны па артыкулу ад webdesignerwall.com
Хатняе заданне: зрабіць адаптыўнасць крок за крокам