Bacha1991 Сообщение 23/03/2013 14:44 Копия темы
Адаптивная верстка Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.
1). Очень простой CSS и HTML, и ваш элемент будет масштабироваться в соответствии с шириной страницы
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
} 
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 screen {
img {
width: auto; /* for ie 8 */
}
}
Min-width – противоположность max-width, позволяет задать минимальную ширину объекта.
3). Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы.
4). Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы.
5). При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word {
word-wrap: break-word;
}
Материал использован со следующего ресурса.habrahabr.ru/post/144003/