Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Ключевые понятия для адаптации</a></li>

2 <li><a>Разрешения для адаптивной верстки</a></li>

3 <li><a>Что заменить в коде</a></li>

4 <li><a>Адаптивный фон</a></li>

5 <li><a>Адаптивная шапка</a></li>

6 <li><a>Адаптивное меню</a></li>

7 <li><a>Тильда</a></li>

8 <li><a>Adobe Muse</a></li>

9 </ul><p>Верстка веб-порталов под мобильные устройства - задача, с которой все чаще сталкиваются веб-разработчики. Это связано с тем, что гаджеты стали неотъемлемой частью жизни. Люди все чаще посещают интернет-страницы с планшетов и смартфонов.</p>

10 <p>Адаптивность сайта - это его возможность правильного отображения на оборудовании с разными техническими характеристиками. Некий способ "подстраивания" под используемый гаджет. Далее предстоит выяснить, что собой представляет адаптивная верстка сайта, как проверить правильность отображения сервера. Соответствующие сведения пригодятся каждому веб-разработчику.</p>

11 <h2>Ключевые понятия для адаптации</h2>

12 <p>Адаптация сайта, согласно Google, под мобильные или стационарные устройства начинается с изучения некоторых языков. Программист должен иметь хотя бы общее представление о:</p>

13 <ul><li>HTML5;</li>

14 <li>CSS 3;</li>

15 <li>JavaScript.</li>

16 </ul><p>Кроме общий знаний нужно разобраться с ключевыми принципами адаптивности. К ним относят следующие понятия:</p>

17 <ol><li>Поточность - это принцип, описывающий отсутствие смещения информационных блоков во время просмотра сайта с мобильного оборудования.</li>

18 <li>Относительность в изменении. Google указывает, что это принцип использования относительных единиц для установки размеров и координат верхней и нижней границ блока экрана устройства.</li>

19 <li>Применение контрольных точек - расположение компонентов для различных экранов. Используется для того, чтобы предотвратить смещение (сдвиги) содержимого страниц открытого сайта.</li>

20 <li>Использование минимальных и максимальных значений. Google указывает на то, что этот принцип лучше изучать на наглядном примере. Если экран имеет ширину меньше 1000 пикселей, контент будет отображаться на весь экран, в противном случае максимум ширины достигает 1000 пикселей.</li>

21 <li>Вложенность объектов. Google называет этот подход своеобразным методом предотвращения сложностей контроля за разными составляющими страницы. Их можно вложить в один контейнер. Концепция применяется для блоков, которые не требуют адаптации под дисплей. Google относит к ним кнопки с логотипами и некоторые иные управляющие элементы.</li>

22 <li>Одинаковые шрифты. На адаптивном сайте не будут менять шрифты. Это помогает избежать перегрузки сайта.</li>

23 <li>Грамотное применение растровой и векторной графики. Каждое изображение должно быть оптимизировано под новые браузеры.</li>

24 </ol><p>Все это поможет разобраться в том, как адаптировать сайт под разные разрешения. Предложенной информации недостаточно для успешной реализации задачи. Google отмечает, что при применении верстки CSS и HTML необходимо обратить внимание на еще один значимый параметр - на разрешение.</p>

25 <h2>Разрешения для адаптивной верстки</h2>

26 <p>В Google полно информации о том, как сделать веб-сервис хорошо адаптируемым под разнообразные гаджеты и устройства. Соответствующая операция невозможна без соблюдения макетных разрешений. Адаптивность обеспечивается тремя ключевыми значениями:</p>

27 <ul><li>1600 пикселей - для компьютеров;</li>

28 <li>375 пикселей - для мобильных устройств;</li>

29 <li>960 пикселей - для планшетов.</li>

30 </ul><p>Источники Google указывают в качестве стандартных разрешений, при которых не требуется менять дизайн и можно избежать неправильного отображения сайта, следующие варианты:</p>

31 <ul><li>320 или 480 пикселей - мобильные устройства;</li>

32 <li>768 пикселей - планшеты;</li>

33 <li>1024 - нетбуки и некоторые модели планшетов;</li>

34 <li>1280 и более - персональные компьютеры.</li>

35 </ul><p>Предложенные значения являются усредненными. Ширина может изменяться в зависимости от сайта, его ключевой концепции и технических особенностей. Предложенные в первом списке параметры называются брейкпоинтами (breakpoint) - разрешениями, при которых сайт меняет отображение на дисплее устройства.</p>

36 <p>Пример - пользователь открывает с ноутбука с шириной экрана 1280 пикселей веб-сайт, а затем в 2 раза сужает браузерное окно. Как только ширина окажется менее 960 пикселей, сервис в Интернете поменяет свое отображение.</p>

37 <h2>Что заменить в коде</h2>

38 <p>Пытаясь выяснить, как адаптировать имеющийся сайт под разные решения, можно увидеть множество полезной информации и уроков. В процессе верстки разработчику предстоит иметь дело с CSS3 и HTML.</p>

39 <p>CSS3 используется, согласно Google, для формирования каскадных таблиц, а HTML - для указания расположения конкретных компонентов (для непосредственной разметки). Классы объектов, созданных первым кодом, будут указываться в тегах для адаптации вводимых объектов под имеющееся разрешение.</p>

40 <p>Создавать адаптивные страницы, согласно Google, необходимо с формирования контейнера для упаковки картинки:</p>

41 <p>Далее по ширине от созданного контейнера задается ширина картинки. Этот прием позволяет при увеличении и уменьшении экрана увеличивать и уменьшать размеры изображения. Данный прием формирует поверхность для совершенно любых разрешений. Код пишется на CSS:</p>

42 <p>Созданное изображение может потерять качество вследствие масштабирования. Для устранения соответствующей особенности в CSS требуется изменить ширину для максимума и минимума в разрешении. Структура кода окажется такой:</p>

43 <p>Все это - готовый шаблон для одного изображения на сайте. Google указывает следующий HTML-код для небольшой галереи:</p>

44 <p>А вот так задается небольшой отступ. Он прописывается в CSS и помогает обеспечить лучшую адаптивность:</p>

45 <p>Аналогично можно действовать с текстом. Главное - это грамотно задавать параметры загружаемых документов и файлов под максимальное и минимальное разрешение дисплея.</p>

46 <h2>Адаптивный фон</h2>

47 <p>Для установки адаптивного фона сайта для мобильника нужно выполнить следующие действия:</p>

48 <ol><li>Сделать подборку качественной картинки с высоким разрешением, а затем пропорционально уменьшить его в графическом редакторе.</li>

49 <li>Загрузить будущий фон на сервер в папку с картинками.</li>

50 <li>Сформировать body стилей, а затем между тегами вставить стили с метатегом viewpoint. Он преобразовывает картинку в фон.</li>

51 <li>Указать полный путь к папке стилей и его название.</li>

52 <li>Проверить результат, увеличивая и уменьшая размеры окон в браузере.</li>

53 </ol><p>Google описывает этот прием как самый простой. Основная сложность при такой адаптивной верстке заключается в подборе подходящего фонового изображения.</p>

54 <h2>Адаптивная шапка</h2>

55 <p>Google описывает процедуру создания адаптивной шапки на сайте как достаточно сложную операцию. До появления CSS приходилось пользоваться обтеканием и другими трюками для грамотной верстки веб-сервисов. Сейчас добиться желаемого результата проще. Сначала в HTML5 прописывается код шапки, включающий в себя три div-блока:</p>

56 <p>Теперь нужно расписать CSS3 код. Он будет выполнять основную работу и включать в себя несколько строк. CSS код позволяет располагать элементы шапки в тех или иных областях:</p>

57 <p>В самом конце шапка должна стать адаптивной. Для этого применяется свойство justify-content с параметром space-between:</p>

58 <p>Можно проверить итог. Лучше всего сделать это через приложение Google Mobile Friendly.</p>

59 <h2>Адаптивное меню</h2>

60 <p>Задумываясь, как сделать удобный адаптивный сайт, разработчикам нередко приходится "подстраивать" меню веб-порталов под различные экраны. Для этого, согласно Google, требуется:</p>

61 <ol><li>Добавить мета тег meta viewpoint в раздел шапки. Он требуется для корректного отображения меню на любом экране: .</li>

62 <li>Далее нужно добавить структуру меню:</li>

63 <li>Добавить стили в body. Это нужно только в декоративных целях. Цвета могут использоваться любыми. В примере меню бежевое. Под body добавляется тег nav. Он отвечает за создание навигации сайта. Там размещаются основные ссылки меню:</li>

64 <li>У заданного примера 6 ссылок. Контейнер будет иметь ширину 600 пикселей, каждый "блок" - 100 пикселей:</li>

65 <li>Откорректировать медиа-запрос:</li>

66 <li>Создать эффект показа меню при нажатии на ту или иную ссылку. Для этого прописывается следующее body:</li>

67 </ol><p>Получившийся проект будет корректно отображаться на разных устройствах, включая планшет и мобильный телефон. Не всегда прописывать HTML5 код необходимо с нуля. Для верстальщиков создано множество инструментов, позволяющих создавать адаптивные веб-страницы.</p>

68 <h2>Тильда</h2>

69 <p>Google указывает на то, что адаптивность сайту можно придать за счет специальных конструкторов. Лучшим примером является Тильда. Он сможет самостоятельно расставить информационные и графические блоки в нужные места. Конструктор платный и обходится примерно в 1200-1500 рублей. Порог входа - низкий. Справиться с Тильдой сможет даже новичок.</p>

70 <p>Этот конструктор имеет ряд преимуществ:</p>

71 <ul><li>простое редактирование текста;</li>

72 <li>быстрая загрузка видео и картинок;</li>

73 <li>готовые шаблоны для формирования дизайна сайта на любой вкус;</li>

74 <li>понятный на уровне интуиции интерфейс;</li>

75 <li>быстрая разработка стандартных блоков для редактирования и добавления информации, картинок или видео;</li>

76 <li>широкий ассортимент шрифтов с обширными настройками;</li>

77 <li>готовые адаптированные блоки для мобильных устройств, включая таблицы.</li>

78 </ul><p>На Тильде нельзя сформировать веб-портал более чем с 500 страницами. Это единственный недостаток конструктора.</p>

79 <h2>Adobe Muse</h2>

80 <p>CSS-верстка и адаптация веб-портала под телефон или планшет может производиться через Adobe Muse. Google называет это программное обеспечение одним из самых удобных для начинающих верстальщиков. Оно дает возможность сэкономить время на адаптивности. Веб-разработчику всего лишь нужно поработать в редакторе с интерфейсом, а программа сама сгенерирует исходные коды.</p>

81 <p>К плюсам Adobe Muse относят:</p>

82 <ul><li>возможность быстрого создания шаблонов;</li>

83 <li>простое создание адаптивного сайта (стандартный веб-проект, согласно Google, может быть написан за 2-3 часа);</li>

84 <li>функциональность;</li>

85 <li>понятную и быструю работу с HTML5 и CSS3.</li>

86 </ul><p>Для Adobe Muse создано множество видео-уроков. А лучше разобраться с версткой и CSS помогут специализированные дистанционные компьютерные курсы.</p>

87 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является<a>изучение HTML/CSS</a></em>.</p>