ݺߣ

ݺߣShare a Scribd company logo
Адаптивная верстка
<meta name="viewport" content="width=device-width">
Фиксированные макеты
px
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
Резиновые макеты
%
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
Адаптивные макеты
px + media-queries
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
Отзывчивые макеты
% + media-queries
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
Что использовать
max-width и min-width
.selector {
max-width: 1200px;
min-width: 900px;
}
@media
@media screen and (max-width: 960px) {
…. }
@media all and (max-width: 960px) {
…. }
@media(max-width: 960px) {
…. }
@media
@media(max-width: 960px) and (min-width: 400px) {
…. }
Инструменты
Chrome DevTools

More Related Content

Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка