WEB design

Responsive Web Design (RWD) — отзывчивый веб-дизайн

Дизайн, при котором сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств.

Adaptive Web Design (ADW) — адаптивный веб-дизайн

Дизайна, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее устройствах и разрешениях экрана.

Элементы RWD:

Fluid Grid

/*Подстраивает макет сайта под размер экрана пользователя
Пример кода:*/

grid-template-columns: 33.33% 33.33% 33.33%;
/*или*/
grid-template-columns: repeat(3, 33.33%);

/*также используется единица гибкости fr*/

grid-template-columns: repeat(4, 1fr);

/*С помощью этой единицы можно добавлять
 сколько угодно элементов и не считать их ширину*/

Flexible Media

/*Подстраивает размер медиа элементов сайта 
под размер экрана пользователя
Пример кода:*/

.width-height-100 {
  width: 100%;
  height: 100%;
}
.width-height-100 {
  width: 100%;
  height: auto;
}

Media Queries

/* Использует правило @media для включения 
блока свойств CSS, 
только если выполняется определенное условие
Пример кода:*/

@media (max-width: 1000px)
{
    .navbar-links ul
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

Пример сайта на пк с разрешением 2560×1440

RWD nav

Пример сайта на телефоне с разрешением 414×896

RWD nav

Вывод:

Я считаю, что отзывчивый дизайн лучше и удобнее. Если изначально делать сайт для под rwd, то не придется много раз менять css. Не надо будет задумываться о размерах устройства пользователя и т.д. Но также у всех программистов свой стиль написания кода, поэтому для всех по разному.