Увядзенне ў верстку для розных экранаў у CSS

У сучасным свеце сайт павінен добра адлюстроўвацца на прыладах з розным памерам экрана.

Як правіла прылады вылучаюць у чатыры класы: камп'ютэры (desktop), ноўтбукі, планшэты (tablet) і тэлефоны (mobile).

Раней, у старадаўнія часы, былі вядомыя папулярныя памеры экранаў усіх прылад, блага іх было не так шмат. І сайты рабілі так, каб яны карэктна адлюстроўваліся на вядомым спісе дазволаў.

У цяперашні час прылад стала так шмат, што немагчыма скласці спіс дазволаў, пад якія трэба рабіць сайт. Цяпер лічыцца, што верстка павінна карэктна адлюстроўвацца на экране любога памеру.

Гэта дасягаецца перабудовай блокаў у ключавых кропках макета. Пры гэтым гэтыя ключавыя кропкі выбіраюцца не пад пэўныя прылады, а пад кантэнт сайта - так, каб ён выглядаў добра.

Паміж ключавымі кропкамі шырыня элементаў сайта павінна быць плаваючай, каб яна падстройвалася пад шырыню экрана. А ў ключавых кропках адбываецца перабудова блокаў у іншыя пазіцыі.

Апісаная верстка завецца адаптыўнай або адзыўчывай (responsive). Яе вывучэннем мы і займемся ў наступных уроках.