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

1. Адаптивная верстка

2. <meta name="viewport" content="width=device-width">

3. Фиксированные макеты
px

5. Резиновые макеты
%

7. Адаптивные макеты
px + media-queries

9. Отзывчивые макеты
% + media-queries

11. Что использовать

12. max-width и min-width
.selector {
max-width: 1200px;
min-width: 900px;
}

13. @media
@media screen and (max-width: 960px) {
…. }
@media all and (max-width: 960px) {
…. }
@media(max-width: 960px) {
…. }

14. @media
@media(max-width: 960px) and (min-width: 400px) {
…. }

15. Инструменты

16. Chrome DevTools