Адаптивная верстка: задачи, преимущества и виды

Адаптивная верстка сайта – это необходимое требование, которому должен отвечать современный веб-ресурс. Доля мобильного траффика растет с каждым годом, поэтому времена, когда сайт разрабатывался только для компьютеров, давно позади. Современность требует соответствия каждому устройству, с которого может зайти посетитель.

Существуют различные подходы к созданию адаптивной верстки. В нашей статье мы расскажем, какие принципы и техники включает в себя этот подход, как можно осуществить такую верстку и разберем типичные ошибки в данной сфере.

Что такое адаптивная верстка

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

Особенно тщательно за этим следят компании, чья деятельность связана с торговлей. Так как если потенциальный покупатель увидит на экране своего смартфона «неудобный» сайт, то он просто закроет его, даже не попытавшись сделать покупку. Именно во избежание подобных ситуаций веб-разработчики уделяют особое внимание адаптивной верстке (mobile friendly).

Когда вы открываете страницу какого-либо сайта на смартфоне, то можете легко понять, адаптирована ли она под ваше устройство. Если приходится «двигать» изображение влево-вправо, чтобы просмотреть контент, то сайт не подвергался оптимизации.

Если адаптивная верстка сайта проведена, то отображение веб-страницы будет изменяться в соответствии с размерами экрана, то есть подстроится под него. При этом отдельные элементы дизайна могут поменять свое положение.

Суть процесса адаптивной верстки заключается в проработке параметров контента – как текста, так и картинки. Осуществить процесс адаптации помогают CSS3 и язык разметки HTML5.

Отличия адаптивной верстки от других видов

Как таковых видов верстки может быть несколько:

• фиксированная (статическая);
• резиновая (тянущаяся);
• адаптивная;
• отзывчивая.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 32535

Каждый из видов основан на разных методах и преследует разные цели.
Фиксированный вид верстки «привязывает» сайт к заданной ширине монитора и не меняет ее, то есть не подстраивает под размер экрана.

Если размеры монитора не достаточны для воспроизведения страницы целиком, то появляется полоска прокрутки вверх-вниз. Это затрудняет восприятие, так как текст/картинку не видно полностью, что вызывает раздражение пользователя.

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

Реализация такой верстки происходит с использованием тега body, в котором и прописывается нужный размер ширины width:

body {

width: 1000 px;

}

При методе резиновой верстки задается интервал значений ширины веб-страницы. Поэтому его еще называют тянущийся или гибкий, так как есть наибольшая и наименьшая величина размера. Например, ширина страницы – min 400 пикселей, а max – 1000. Соответственно, в этих пределах и будет происходить «растяжение» страницы при отображении ее на том или ином устройстве.

Указываются значения наибольшей (max-width) и наименьшей (min-width) ширины. Если есть необходимость, то аналогично указывают интервал и для высоты растяжения: максимальная высота – max-height и минимальная высота – min-height.

body {

width: 90%;

}

div {

min-width: 400 px;

max-width: 1000px;

}

Когда производится адаптивная верстка, то теги прописываются таким образом, что при открытии сайта на любом устройстве происходила его подстройка под параметры экрана. Размеры шрифта, декоративные элементы, местоположение некоторых объектов – для всех этих визуальных деталей можно задать настройки, которые позволят сайту в целом выглядеть привлекательно.

Помимо тегов, для такого типа верстки прописываются и медиа-запросы (@media). Их роль важна для автоматического определения разрешения экрана и распознавания типа устройства. Все это влияет на корректность отображения веб-страницы:

@media all (max-width 1000px) {

div {

width: 900px;

}

}

@media all (min-width 400px) {

div {

width: 280px;

}

}

Если перевести вышеуказанные теги в более понятные данные, то они будут таковы: если ширина экрана превышает 1000 пикселей, то размер страницы принимает статическую величину, равную 900 пикселям. Если же ширина меньше 400 пикселей, то страница сжимается до 280 пикселей.

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

@media all (max-width 1000px) {

div {

width: 60%

}

}

@media all (min-width 400px) {

div {

width: 100%;

}

}

Т

Преимущества сайта с адаптивной версткой

Сейчас больше половины пользователей предпочитают выходить в Интернет с помощью смартфонов или планшетов. Эти устройства не имеют стационарной привязки, главное, чтобы был доступ к Интернету — и можно выходить в сеть в любом удобном месте. Такой тип аудитории интенсивно увеличивается, и ее потребность в просмотре сайта с небольшого экрана необходимо учитывать.

Еще совсем недавно, каких-то 5 лет назад, процент пользователей, выходящих в сеть через гаджеты, был в разы меньше, чем сейчас. Поэтому адаптация сайтов не имела большой значимости. Но сейчас, благодаря популяризации Интернета, адаптивность сайта прорабатывается в первую очередь, и на этом вопросе веб-студии обязательно акцентируют внимание клиента.

Дарим скидку от 60%
на курсы от GeekBrains до 29 декабря

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

• Фактор юзабильности сайта

Интернет-площадки соревнуются друг с другом за внимание пользователей. В свою очередь, посетители сайтов все более придирчиво оценивают дизайн веб-ресурса и удобство взаимодействия с ним. Современная формула привлекательности сайта выглядит так: простота функционала + комфорт нахождения = лояльность пользователя. То есть большее посещение обеспеченно тем сайтам, которые позаботились о своей юзабильности.

Только до 2.01

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Вы и на своем примере можете понять, как сильно раздражают страницы, на которых отражается только часть контента, при просмотре на гаджете. Как только вы видите такие недоработки, то быстро закрываете этот сайт и переходите к другому, более комфортному. Точно так же поступает и подавляющее большинство людей.

Неадаптированные сайты плохо воспринимаются с небольших экранов. Приходится перемещать текст или изображение по монитору, чтобы увидеть его полностью. Часто отдельные элементы наползают друг на друга, что тоже не облегчает процесс ознакомления с информацией. А если говорить о заполнении каких-то форм, то это вообще очень проблематично сделать.

• Возможность продвижения

Еще одна проблема, с которой сталкивается неадаптированный сайт – это большой процент отказов и потеря мобильных пользователей. Это влияет на позиции ранжирования. Ведь алгоритмы поисковых систем Google и Яндекса учитывают отказы: чем больше их количество – тем ниже опускается сайт в рейтинге к выдаче.

Уже с 2018 года поисковые алгоритмы Google при сортировке сайтов к выдаче используют модель индексации Mobile-first. Приоритет в анализировании сначала отдают веб-страницам, способным к демонстрации на мобильных устройствах. Сортировка же сайтов происходит по принципу ранжирования для мобильной выдачи. При этом учитывается идентичность обеих версий – десктопной и мобильной. Само собой, что в эту категорию попадают сайты, прошедшие адаптивную верстку.

Учитывая вышеуказанное правило ранжирования, можно сделать вывод, что при игнорировании мобильно-адаптивной верстки продвижение сайта будет сильно затруднено. Ведь если он не попадает в выдачу при мобильном поиске, то снижается его рейтинг и с ПК становится все сложнее его находить. Если это бизнес-ресурс, то компания теряет целевых потребителей, а, значит, терпит убытки.

• Торговая площадка

Адаптированный сайт увеличивает объем продаж. Это закономерно, так как многие пользователи посещают интернет-магазины, используя смартфоны или планшеты. А если ресурс не удобен в пользовании через мобильный гаджет, то компания не будет иметь приток новых покупателей из числа пользователей таких устройств.

8 принципов адаптивной верстки

При адаптации сайта веб-разработчики стремятся к сохранению исходной концепции, сути проекта и прямого назначения ресурса. Также им необходимо обеспечить функциональность сайта и добавить некоторые особенности, которые позволят в дальнейшем производить подстройку под инструмент воспроизведения.

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

• Прочность версии

Отображение сайта на экране гаджета должно иметь сходство с отображением на экране ПК. Однако расположение важных элементов должно быть компактным и выстроенным по вертикали, то есть идти потоком сверху вниз.

• Соотношение единиц измерения

Необходимо помнить, что одни и те же пиксельные разрешения отображаются неодинаково на разных мониторах – компьютера и, например, айфона. Чтобы избежать недочетов, связанных с этой особенностью, необходимо задавать масштаб и координаты, отталкиваясь от общей для всех экранов точки. На данный момент принято равняться на верхнюю границу монитора.

• Применение контрольных точек

Чтобы отдельные элементы страницы бесконтрольно не расползались по ней, их привязывают к конкретным объектам, чье положение будет статичным, пока не будет осуществлен вход с другого устройства. То есть эти объекты будут выступать в роли своеобразных узлов, на которые будут ориентированы другие детали.

• Интервалы значений

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

• Принцип вложенности объектов

Если один объект в качестве своих свойств содержит другой объект, то лучше сохранить их взаимосвязь и поместить в общей контейнер, чтобы не тратить время на дополнительные настройки. В роли таких объектов выступают логотипы, кнопки и многие другие детали веб-страницы.

• Корректность шрифтов

Шрифт допустимо переводить в web-формат, чтобы он, ориентируясь на размеры монитора, автоматически менял свой размер. Но в этом случае для шрифта понадобится время на загрузку. Не все пользователи обладают терпением, чтобы дожидаться момента, когда подгрузится весь контент – адаптивный сайт должен открываться быстро.

• Правильное использование графики

Если при наполнении сайта используется графика, то продумайте, по какому принципу ее отображать. Если она содержит мелкие детали, то делайте ее растровой, если нет – то векторной. Также все картинки следует сжать таким образом, чтобы их формат могли поддерживать старые браузеры.

• Корректные медиазапросы

Медиазапросы задают:

• типы поддерживаемых устройств;
• условия для демонстрации контента.

Для каждого медиазапроса будут использоваться необходимые стили CSS-языка.

Разрешения экранов для адаптивной верстки

При разработке адаптивного сайта веб-дизайнеры учитывают не конечные размеры страницы, а конкретные пределы, превышение которых приводит к изменению формата отображения. Существуют общепринятые размеры для адаптивной верстки:

• для смартфонов — 320 px, 480 px и выше;
• для планшетов — 768 px и выше;
• для нетбуков — 1024 px и выше;
• для мониторов — 1280 px, 1600 px, 1920 px и выше.

При неадаптивной верстке элементы статично привязаны к ширине экрана, именно поэтому они увеличиваются/уменьшаются в размерах или изменяют свое положение. Такое поведение объектов будет напрямую зависеть от типа устройства, с помощью которого открывается сайт.

На сегодняшний день выполнение адаптивной верстки осуществляется с опорой на Mobile First. То есть разработка ведется с ориентацией на мониторы мобильных устройств и только потом дорабатывается настройками под десктопные мониторы.

4 техники адаптивной верстки

• Flexible layout, или гибкий макет

При этой технике происходит переход фиксированных значений в относительные. Для этого используется формула, определяющая процентное соотношение: target ÷ context = result. Другой способ – поделить ширину объекта на ширину экрана. Полученное число равно процентному значению ширины объекта, которое используется для его подстройки под размер экрана гаджета.

Например, полная ширина макета равна 1000 пикселям, но делится на два части: левая шириной 250 пикселей и правая, шириной 530 пикселей. Далее, используя принцип прямой пропорции, получаем 25 % для левой части, 53 % для правой.Использование такого способа создания макета позволяет получить сайт, который автоматически подстраивается под любые размеры экранов.

• Flexible media, или гибкое изображение

Любой вид медиаконтента адаптируют, применяя свойство {max-width: 100%}. Такой подход способствует изменению размеров картинок, видео и прочих видов медиа в соответствии с изменениями ширины экрана.

• Flexible Embedded Media, или гибкое встроенное медиа

Принцип соотношения max-width не даст результатов, если на странице сайта присутствует, например, ролик YouTube, то есть медиаконтент постороннего ресурса. Для корректного отображения подобного встроенного контента его нужно правильно разместить внутри родительского объекта. При этом родительский объект должен иметь параметры: ширина = 100 %, высота = 0. Тогда он будет менять свой масштаб в соответствии с размерами монитора.

Далее нужно задать отступ в нижней области родительского объекта. Чтобы соблюсти пропорциональность высоты и ширины, нужно установить значение отступа согласно соотношению сторон видео.Например, стороны видео соотносятся, как 16:9. Используем формулу процентного соотношения: 9/15=0,5625 или 56,25%.

• Media queries, или медиазапросы

Этот способ адаптирует сайт таким образом, что он при помощи CSS модуля приобретает способность подстраиваться под различные типы устройств. CSS устанавливает взаимосвязь между разрешением экрана и установленными стилями. Media queries находит широкое применение в мобильной и TV разработках, печати и в таких типах устройств, как 3D-очки.

Применение техники Media queries подразумевает несколько вариантов:

• использование правила @media для уже действующей таблицы стилей;
• использование правила @import для интеграции новой таблицы стилей;
• использование ссылки на таблицу стилей из документа HTML.

Для упрощения действий, чтобы миновать лишние HTTP-запросы, лучше применять правило @media внутри имеющейся таблицы стилей.

2 метода разработки адаптивной верстки

Чтобы разобраться в том, как сделать адаптивную верстку, нужно понимать применяемые для этого процесса технологии: HTML5 и CSS3.

CSS3 — новая технология в оформлении HTML документов, представляющая собой каскадные таблицы 3-го поколения. Созданные с ее применением правила позволяют «вписать» на экран устройства все объекты веб-страницы.

При использовании этого метода появляется возможность задавать такие величины объектов, как нужный размер для конкретного разрешения монитора, процентная доля заполняемого пространства (например, 80 % рабочего пространства экрана) и прочие параметры.

После внедрения этого языка программирования для веб-разработчиков открылась новая возможность в создании элементов, подстраиваемых под заданное разрешение монитора (правило медиазапросов).

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

Так как метод HTML5 является языком разметки, то с помощью него задают координаты положения объектов на странице. Созданные посредством CSS3 классы прописываются в тегах HTML. Благодаря этому, элементы подстраиваются под разрешение экрана.

На первом этапе процесса адаптивной верстки нужно создать изображение, которое будет растягиваться в соответствии с размерами монитора.

HTML

Здесь все просто: это контейнер, чтобы «упаковать» изображение.

CSS

Здесь соотнесли ширину контейнера div и ширину изображения img, чтобы img меняло свои размеры в соответствии с изменениями размеров div.

То есть получена картинка, которая будет подстраиваться под любое разрешение экрана (неважно, 320*240 px или 1920*1080 px), занимая весь монитор.

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

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

CSS

На этом этапе параметры «упаковочного» контейнера были откорректированы. Теперь его размеры будут меняться в интервале оптимальных значений 500-1000 px. Соответственно, и размеры картинки тоже будут изменять свою величину.

Читайте также!

Frontend-разработчик: навыки, зарплата, обучение

Подробнее

Так как при адаптивной верстке предполагается оптимизация всего содержимого сайта, то перейдем к более сложной процедуре — созданию мини-галереи.

Начнем с уже знакомых шагов.

HTML

Здесь было создано несколько изображений, которые поместили в контейнер.

CSS

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

Созданная в этом примере мини-галерея будет подстраиваться под мониторы с различными разрешениями. То сеть цель достигнута — адаптивная верстка выполнена верно.

Инструменты для адаптивной верстки

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

• Инструментарий Bootstrap

Бесплатная платформа со свободным набором инструментов для создания сайтов и приложений. Bootstrap регулярно обновляется и используется для создания кнопок, меток, блоков навигации и прочих систем управления содержанием сайта.

Эта платформа — своеобразный скелет для адаптивных веб-сайтов. Нужно просто поэтапно сформировать структуру HTML и правильно классифицировать созданные объекты. Далее фронтенд отобразит готовые блоки с оформлением.

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

• Startup

Это вспомогательная программа-проектировщик, которую используют в помощь Bootstrap, чтобы создавать темы из готовых блоков. Нужно сконструировать основу из нужных элементов и экспортировать проект на ПК. В результате будет получен сайт с HTML, CSS и JS файлами.

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

За удобства, дающие Startup, нужно будет заплатить. Самый простой тариф будет стоить $249 в год. Если оплачивать годовую подписку сразу, то можно сэкономить $99.

• Сервис Responsinator

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

При проверке сайта на Responsinator демонстрируется версия, подстроенная под выбранное разрешение. Есть шанс, что в итоге на реальном устройстве изображение будет выглядеть несколько иначе, но по большей части отличия не существенны.

• Инструмент Caniuse

Еще один сервис, позволяющий свести к минимуму ошибки при адаптивной верстке. В Caniuse можно найти информацию о способности браузера поддерживать те или иные свойства сайта: например, CSS свойство sticky или формат шрифта ttf.

Caniuse идеально подойдет тем, кто доводит до совершенства адаптивную верстку и кроссбраузерность.

Типичные ошибки при разработке адаптивной верстки

Когда дело касается создания адаптивной версии интернет-магазина, то в большинстве случаев допускаются одни и те же ошибки. Они отражаются на результативности сайта к подстройке под экран, а также затрудняют действия пользователя. Основными такими ошибками будут:

• Размеры шрифта и активных элементов. Те объекты, которые хорошо видны на большом экране, становятся трудно воспринимаемыми на маленьких мониторах мобильных устройств. Чтобы не допустить такой ситуации, используйте шрифт не менее 12 пикселей. Также подбирайте корректные размеры для остальных важных элементов: кнопок, интерактивных деталей и т.д.
• Блоки с прокруткой. Чтобы сэкономить место, часто используют блоки, которые можно прокручивать. Если гаджет имеет сенсорный экран с небольшой шириной, то прокрутка приносит массу неудобств пользователю. В таких случаях лучше использовать функцию «раскрытия» блока кликом или просто показывать блок во весь его размер.
• Объект с событием, реагирующим на касание. На многих сайтах можно встретить элементы, запускающие событие, когда на него наводят курсор: например, всплывающие подсказки, меню и т. д. Нужно учитывать факт того, что на мобильных гаджетах курсор отсутствует. То есть то, что можно сделать на десктопе с помощью клика мыши, на сенсорных экранах приходится делать с помощью касания.
• Несворачиваемое меню. При адаптивной верстке создают удобные для пользователя детали. А массивное меню, раскрываясь на весь экран, явно не отвечает идеям адаптивности, так как просто-напросто мешает. Поэтому следует предусмотреть иконку, которая при необходимости скрывала бы или раскрывала меню.
• Отсутствие глубокого тестирования. Перед тем как запустить сайт интернет-магазина, нужно обязательно провести проверку его функциональности, а также уделить внимание основным путям посетителей в разных браузерах. Это поможет увидеть допущенные при разработке ошибки.
• Долгая загрузка страниц сайта. Каждый интернет-пользователю ценит скорость работы сайта. Так как она напрямую зависит от «веса» страницы, то нужно сделать объем составляющих страницу элементов минимальным. Чтобы добиться этого, содержание распределяют по дополнительным вкладкам, снимая нагрузку с основной части. Изображения, Java-скрипты и CSS-файлы тоже играют роль в скорости загрузки. Поэтому при разработке сайта нужно оставлять только важную информацию. А использование специальных инструментов поможет снизить размер ресурсных файлов.
• Отсутствие предварительного анализа аудитории пользователей. Это важный этап, который нельзя игнорировать. Цель анализа — понять, какими гаджетами для выхода в Интернет пользуется аудитория и какие действия предпринимают пользователи во время веб-серфинга. Только зная ответы на эти вопросы, можно разработать сайт, способный удовлетворить требования аудитории.

Где можно научиться адаптивной верстке

Если вы задались целью обучиться адаптивной верстке, то хорошей школой для вас может стать курс от GeekBrains.

Курс охватывает все важные для адаптивного программирования темы, как в теории, так и на практике. Например, на практических уроках студентов обучают разрабатывать front-end части интернет-магазина, применяя при этом коды к шаблонам Bootstrap. Также изучаются HTML5 и CSS3 технологии, языки SASS и LESS. На курсе проходят все этапы адаптивной верстки, разбирают принципы кроссбраузерности и валидности интерфейса сайта.

Читайте также!

Разработка iOS-приложений: основы, программы, примеры

Подробнее

Чему можно научиться на курсе:

• работе с HTML5 & CSS3;
• верстке адаптивных сайтов;
• практическому применению принципов валидной кроссбраузерной верстки;
• работе с препроцессорами LESS & SASS;
• работе с Bootstrap;
• работе с элементами при помощи Flexbox.

Что можно получить от курса:

• доступ к видеозаписям всех онлайн уроков;
• методические и практические материалы;
• возможность общения с однокурсниками;
• сертификат о пройденном обучении.

Адаптивная верстка сайта требует особых знаний не только в теории, но и на практике. Тот, кто смог ими овладеть, по праву считается Мастером, ведь сам процесс верстки непрост, но результат такой работы можно сравнить с предметами искусства.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование