0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Адаптивная вёрстка - неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.</p>
1
<p>Адаптивная вёрстка - неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.</p>
2
<p>Ранее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.</p>
2
<p>Ранее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.</p>
3
<p>В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:</p>
3
<p>В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:</p>
4
<ul><li>гибкие элементы;</li>
4
<ul><li>гибкие элементы;</li>
5
<li>использование возможностей<em>Flex</em>;</li>
5
<li>использование возможностей<em>Flex</em>;</li>
6
<li>использование<strong>media</strong>-запросов<em>CSS</em>;</li>
6
<li>использование<strong>media</strong>-запросов<em>CSS</em>;</li>
7
<li>создание<em>контрольных точек (breakpoint)</em>.</li>
7
<li>создание<em>контрольных точек (breakpoint)</em>.</li>
8
</ul><h2>Адаптивная вёрстка</h2>
8
</ul><h2>Адаптивная вёрстка</h2>
9
<p>В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.</p>
9
<p>В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.</p>
10
<p>В рамках курса все подходы будут сложены в одно понятие -<em>адаптивная вёрстка</em>.</p>
10
<p>В рамках курса все подходы будут сложены в одно понятие -<em>адаптивная вёрстка</em>.</p>
11
<h2>Практика</h2>
11
<h2>Практика</h2>
12
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
12
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
13
<p>Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях<em>viewport</em>.</p>
13
<p>Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях<em>viewport</em>.</p>
14
<p>Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests__/__image_snapshots__.</p>
14
<p>Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests__/__image_snapshots__.</p>
15
<h2>Инструменты разработчика</h2>
15
<h2>Инструменты разработчика</h2>
16
<p>Каждый современный браузер имеет специальный инструментарий разработчика. В браузере<em>Google Chrome</em>его можно вызвать, используя контекстное меню, в котором есть пункт<em>Inspect</em>, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка<em>Toggle Device Toolbar</em>. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.</p>
16
<p>Каждый современный браузер имеет специальный инструментарий разработчика. В браузере<em>Google Chrome</em>его можно вызвать, используя контекстное меню, в котором есть пункт<em>Inspect</em>, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка<em>Toggle Device Toolbar</em>. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.</p>
17
<ul><li><a>Описание режима эмуляции мобильных устройств в Google Chrome</a></li>
17
<ul><li><a>Описание режима эмуляции мобильных устройств в Google Chrome</a></li>
18
<li><a>Описание режима эмуляции мобильных устройств в Firefox</a></li>
18
<li><a>Описание режима эмуляции мобильных устройств в Firefox</a></li>
19
<li><a>Описание режима эмуляции мобильных устройств в Safari</a></li>
19
<li><a>Описание режима эмуляции мобильных устройств в Safari</a></li>
20
</ul>
20
</ul>