Адаптивный сайт на html: Что менять в HTML и CSS коде

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

Учебник по адаптивному веб-дизайну: пошаговое руководство

Почему нам нужно пройти пошаговое руководство по адаптивному веб-дизайну, если мы можем просто использовать WordPress и найти тему, которая позаботится о том, чтобы наш веб-сайт был отзывчивым?

Почему дизайн адаптируется с нуля?

В моей статье «12 лучших бесплатных адаптивных тем WordPress для портфолио» у нас были клиенты с ограниченным бюджетом, которые хотели, чтобы мы создавали адаптивные веб-сайты WordPress с портфолио, используя тему «портфолио» (а не плагин для портфолио), которая продемонстрировала бы их тяжелую работу.

Мы достигли этой цели, найдя бесплатные темы WordPress для этой работы, но наш новый клиент, Труди, имеет еще более ограниченный бюджет и абсолютно не хочет, чтобы мы переделывали ее текущий сайт на WordPress или в любой другой системе управления контентом. Труди прямо сказала нам: «Мне все это не нужно».

Труди, преподаватель уроков фортепиано, уже имеет статический веб-сайт, созданный с помощью HTML и CSS, и все, что она хочет, чтобы мы сделали, это сделать ее существующий сайт адаптивным для примерно 15 процентов ее учеников, которые сказали ей: «Мисс.Труди, мне сложно просматривать расписание занятий на вашем сайте на моем мобильном телефоне (планшете) «.

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

Ей нужен адаптивный веб-сайт, чтобы он хорошо смотрелся на всех типах устройств.

Вот в чем дело…

После того, как WordPress начал набирать популярность, многие из нас, веб-дизайнеры, привыкли к тому, что большинство наших клиентов говорят: «Я хочу, чтобы мой сайт был на WordPress!» Не имело значения, нужно им «все это» или нет. Они слышали, что WordPress — это путь, которым нужно идти сейчас и развиваться позже, поэтому они потребовали, чтобы мы «поместили» их в WordPress. Так мы и сделали, и мы (опять же, не вы, только я и некоторые другие веб-дизайнеры) немного подзабыли со стороны статических веб-сайтов.

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

Учебник по адаптивному веб-дизайну: 5 шагов

Вы можете создать адаптивный веб-сайт за пять основных шагов:

1. Разберитесь в элементах адаптивного дизайна.

2. Поищите примеры.

3. Определите ваши медиа-запросы.

4. Определите точки останова.

5. Проверьте свой выбор.

Приступим!

1. Изучение элементов адаптивного дизайна

В адаптивном веб-дизайне: это не просто тенденция, пишет Соня Грегори, что «адаптивный веб-дизайн создает систему для одного сайта, которая распознает размер устройства пользователя и реагирует на него.”

Далее она говорит, что в основе адаптивного дизайна три элемента: гибкая сетка, гибкие изображения и текст и медиа-запросы :

1. Плавная сетка позволяет веб-сайту казаться больше или меньше в зависимости от размера устройства посетителя.
2. Гибкие изображения и текст также будут отображаться больше, меньше, совсем не отображаться или заменяться в зависимости от устройства посетителя.
3. Наконец, задача медиа-запросов состоит в том, чтобы корректно отображать плавные сетки, гибкие изображения и текст, поэтому давайте дадим медиа-запросам немного подробного объяснения, поскольку они делают тяжелую работу в адаптивном веб-дизайне.

Но сначала давайте…

2. Найдите примеры

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

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

Netwars

GoDaddy

Приключения.com

Карма

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

И мы собираемся сделать это с помощью медиа-запросов.

3. Определите свои медиа-запросы

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

Медиа-запрос выглядит так:

 @media (max-width: 500px;) {
/ * Здесь ваши правила CSS * /
}
 

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

точек останова? Да, я знаю. Мы не прошли даже половину этого руководства, и нам нужно определить еще один термин. Какими бы важными ни были медиа-запросы, они ничего не значат без точек останова!

4. Определите точки останова

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

В статье «На пути к адаптивному дизайну» Стефани Уортс предлагает «начать с нескольких логических точек останова», и я согласен.

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

Лучше всего создавать точки останова для средних размеров настольных мониторов и экранов мобильных устройств. Не запоминайте S-серию, 8-е поколение и тому подобное.Мой лучший совет — выбирать то, что у устройств общего, а не то, что их отличает.

Итак, для обновленного и адаптивного веб-сайта г-жи Труди мы собираемся определить следующие пять медиа-запросов и точек останова:

 @media (max-width: 1200px) {...} / * для настольных компьютеров * /

@media (max-width: 991px) {...} / * для ноутбуков * /

@media (min-width: 768px) и (max-width: 990px) {...} / * для больших планшетов * /

@media (max-width: 768px) {... } / * для планшетов меньшего размера * /

@media (max-width: 500 пикселей) {...} / * для мобильных * /

 

5. Проверьте свой выбор

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

Используйте инструменты разработчика браузера

На ПК, используя Google Chrome или Mozilla Firefox, вы можете перейти на веб-сайт, а затем либо нажать F12 на клавиатуре, либо щелкнуть правой кнопкой мыши и выбрать «Проверить», чтобы открыть инструменты разработчика браузера для имитации просмотра веб-сайта на другом экране. размерные режимы.

F12 и методы щелчка правой кнопкой мыши также работают для Google Chrome и Mozilla Firefox на Mac, но если вы хотите использовать инструменты разработчика с Safari, вы должны сначала включить Web Inspector.

Давайте посмотрим на сайт г-жи Труди в разных размерах с помощью инструментов разработчика в браузере Google Chrome на ПК:

 @media (max-width: 1200px) {...} / * для настольных компьютеров * /
 

 @media (max-width: 991px) {...} / * для ноутбуков * /
 

 @media (min-width: 768px) и (max-width: 990px) {...} / * для больших планшетов * /
 

 @media (max-width: 768 пикселей) {...} / * для планшетов меньшего размера * /
 

 @media (max-width: 500 пикселей) {...} / * для мобильных телефонов * /
 

Однако использование инструментов разработчика для просмотра сайта г-жи Труди не совсем подходит для меня. Хотя я благодарен за возможность смоделировать веб-сайт клиента в моем браузере, на самом деле я предпочитаю настоящий, а это означает…

Использовать фактические устройства

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

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

А что насчет «сначала мобильные»?

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

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

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

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

Заключение: Почему так важен адаптивный веб-дизайн?

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

Я имею в виду, что бизнес г-жи Труди не пострадал бы слишком сильно, если бы только около 15 процентов ее учеников немного увеличивали масштаб, смахивали и щипали. Остальные 85% полностью довольны сайтом г-жи Труди таким, какой он есть.

Или они?

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

Все больше и больше людей используют интеллектуальные устройства для просмотра веб-контента.

И не забывайте Google

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

Еще в апреле 2015 года Google начал кампанию по наказанию веб-сайтов, понижая их рейтинг в поисковых системах, если веб-сайт не оптимизирован для мобильных устройств. Это было большое событие, известное в Интернете как Mobilegeddon. Google ускорил свою кампанию в марте 2016 года.

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

Короче говоря, мобильные веб-сайты — это лучшая жизнь. Не имеет значения, используют ли 15% или даже 5% посетителей веб-сайта мобильные устройства для просмотра вашего веб-сайта или веб-сайтов ваших клиентов.

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

Автор изображения: Маркус Бирнер на Unsplash

Что такое адаптивный веб-дизайн?

Вы спрашивали себя: «Что такое адаптивный веб-дизайн?» Адаптивный веб-дизайн — это подход, при котором дизайнер создает веб-страницу, которая «реагирует на» или меняет размер в зависимости от типа устройства, через которое она просматривается. Это может быть большой монитор настольного компьютера, ноутбук или устройства с маленькими экранами, такие как смартфоны и планшеты.

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

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

Что такое адаптивный веб-дизайн?

Цель адаптивного дизайна — создать один сайт, но с разными элементами, которые по-разному реагируют на просмотр на устройствах разного размера.

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

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

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

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

Как работает адаптивный веб-дизайн?

На адаптивных сайтах используются жидкие сетки. Все элементы страницы имеют размер пропорционально, а не в пикселях. Таким образом, если у вас есть три столбца, вы не должны точно сказать, какой ширины они должны быть, а скорее, насколько они должны быть по отношению к другим столбцам. Столбец 1 должен занимать половину страницы, столбец 2 должен занимать 30%, а столбец 3 должен занимать, например, 20%.

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

Сопутствующие проблемы

Mouse v. Touch: При разработке дизайна для мобильных устройств также возникает вопрос о сравнении мыши с сенсорным экраном. На настольных компьютерах у пользователя обычно есть мышь для навигации и выбора элементов. На смартфоне или планшете пользователь в основном использует пальцы и прикасается к экрану. То, что может показаться легким для выбора с помощью мыши, может оказаться трудным для выбора пальцем в крошечном месте на экране.Веб-дизайнер должен учитывать «прикосновение».

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

Приложения и «мобильные версии»: Раньше вы могли задумываться о создании приложения для своего веб-сайта — скажем, приложения для iPad или Android.Или у вас была бы мобильная версия специально для BlackBerry.

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

Почему малым предприятиям нужно переходить на адаптивный веб-дизайн

Все больше людей используют мобильные устройства. Согласно недавнему исследованию Pew, 77% американцев теперь владеют смартфонами в 2018 году, что по сравнению с 35% в первом опросе владельцев смартфонов, проведенном Pew Research Center в 2011 году.

Проверьте свой трафик, и вы можете быть просто шокированы тем, сколько посетителей переходят на ваш сайт через мобильные устройства. (В Google Analytics выберите «Аудитория» слева, затем «Мобильный», чтобы увидеть, какая доля трафика приходится на мобильные устройства. Вы даже можете развернуть, чтобы увидеть, какие устройства отправляют трафик.)

Шаблоны адаптивного дизайна теперь повсюду, для покупки. Если, например, у вас есть сайт WordPress, вы можете посетить авторитетную галерею шаблонов, такую ​​как ThemeForest, и выполнить поиск по запросу «адаптивные темы WordPress.«Купите один менее чем за 50 долларов. Затем ваш веб-разработчик может настроить его для вашего логотипа и бренда.

Примечание редактора. Компания Small Business Trends работает над новым адаптивным дизайном. А ты не должен?

Фото через Shutterstock

Как создать отзывчивый веб-сайт с начальной загрузкой? | by Pawan Sahu

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

Для тех, кто не знает о Bootstrap — это популярный фреймворк CSS, который можно использовать для создания внешнего интерфейса веб-сайта, то есть дизайна. Он достаточно гибкий, чтобы вы могли создать веб-сайт в соответствии с вашими требованиями, и его можно соответствующим образом настроить.

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

Чтобы создать адаптивный веб-сайт, не нужно быть экспертом. Использование Bootstrap позволяет легко разработать адаптивный веб-сайт, поскольку не требует от вас играть с конкретными спецификациями CSS Grid или Flexbox.

Прежде чем мы перейдем к самому руководству, давайте узнаем, что означает отзывчивый Bootstrap Website.

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

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

Примечание: Вы можете использовать простой текстовый редактор и браузер, чтобы подготовить веб-сайт. Однако, если вы хотите изучить, как он будет функционировать как настоящий веб-сайт, мы рекомендуем вам проверить бесплатные VPS, такие как Amazon Web Services, и разместить свой веб-сайт в Интернете. Таким образом, вы можете проверить его поведение в разных системах или браузерах.

Базовая настройка

Шаг 1: Область просмотра и начальный масштаб

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

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

Шаг 2: Подключение Bootstrap

Теперь пришло время связать Bootstrap библиотеки.Это можно сделать, просто используя приведенный ниже код. Чтобы код заработал, вам также необходимо загрузить Bootstrap в папку разработки и распаковать его. Он создаст две папки в вашей основной папке разработки, как показано на изображении ниже.

Теперь используйте следующий код и поместите его в файл index.html под метатегом точки обзора.

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

1. Навигация
2. Информационная область
3. Раздел содержания
4. Правая боковая панель
5. Нижний колонтитул.

Шаг 1: Начало навигации

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

Как видите, также использовались другие классы, такие как fixed-top, navbar-light, bg-light и скоро. Они контролируют характер текста, его фон и так далее.

А теперь давайте добавим еще код.

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

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

Шаг 2: Поднятие информационной области

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

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

 
 
 
 Узнайте, как сделать адаптивный веб-сайт Bootstrap 
 
 
 Зарегистрируйтесь сейчас, чтобы получить доступ к руководству < / p> 
 
 
 Два других ключевых класса здесь - это классы display-2 и btn btn-primary btn-lg.Они создают большой контент в центре веб-сайта.
  Шаг 3:  Подготовка контента
 Пришло время создать раздел контента для адаптивного веб-сайта. Чтобы обеспечить адаптивность этого раздела, мы будем использовать col-md-8 mb-4, col-md-4 mb-4 и так далее. Как видите, мы используем систему начальных сеток на основе Flexbox.
 Col-md- * является основой всей конструкции. Это двухколоночный макет, который будет активирован, когда веб-сайт найдет экран среднего размера.Точно так же col-xs- * будет срабатывать, если встречается экран меньшего размера. Выбор классов полностью зависит от вас, так как вам нужно решить, на какой размер экрана настроить таргетинг.
 Единственное, что вам нужно иметь в виду, это то, что общий столбец, поддерживаемый начальной загрузкой, равен 12. Это означает, что вам нужно поместить только классы, сумма которых равна 12. Если все сделано неправильно, код не будет работать как намеревался. Кроме того, вы также можете использовать класс строки в столбцах и вкладывать их с помощью элемента div.Давайте взглянем на приведенный ниже код, чтобы лучше понять.
  
 
  
 
 
 Полное введение в Bootstrap 
 
 
 
 Познакомьтесь с Boostrap в детстве 
 < / p> 
  Подробнее  
 
  
 
 
 Правильно изучите веб-разработку 
 
 
 
 Хотите стать веб-разработчиком на полную ставку? 
 
 
  Подробнее  
 
  
 
 
 Ознакомьтесь с коллекцией книг 
 
 
 
 Получите лучшие книги, как правильно учиться 
 
 
  Подробнее…  
 
 
 
 
  Шаг 4:  Подготовка правой боковой панели
 Отлично, мы создали значительную часть сайта.Теперь пора подготовить правую боковую панель. В случае нашего веб-сайта мы будем перечислять вертикальный список навигации на боковой панели. Для этого все, что вам нужно сделать, это использовать приведенный ниже код.
 
 
 
 
  Основные руководства  
 
 
 
 
  Учитесь у экспертов  
 
 
  
 
  Шаг 5:  Нижний колонтитул
 Последний шаг - подготовить нижний колонтитул.Нижний колонтитул содержит коммерческую информацию или любую другую информацию об авторских правах. Чтобы создать загрузчик, просто используйте приведенный ниже код.
  
  Заключение 
 На этом мы подошли к концу нашего руководства. Если у вас возникли проблемы с интервалом с элементами, мы рекомендуем вам помещать классы, которые требуют, чтобы они функционировали должным образом.Чтобы проверить, правильно ли работает ваш веб-сайт, вы можете проверить это, изменив размер окна. Кроме того, глубоко погрузитесь в Bootstrap, так как с ним вы можете делать массу вещей.
 Итак, вам понравился урок? Если вы это сделаете, не забудьте оставить комментарий ниже и дайте нам знать. Также поделитесь учебником со своими сверстниками!
 Учебное пособие по адаптивному веб-дизайну HTML - TutorialBrain 
 На главную »HTML» HTML-адаптивный веб-дизайн
 HTML-адаптивный веб-дизайн 
 Адаптивный веб-дизайн означает, что веб-сайт должен реагировать на все устройства, такие как настольные компьютеры, ноутбуки, iPhone, Android, планшеты и т. Д.
 Веб-сайт должен правильно настраиваться на всех устройствах в соответствии с формой и размером устройств. Адаптивный веб-сайт будет хорошо и привлекательно выглядеть на всех устройствах, и ни одна из ссылок, изображений, шрифтов и т. Д. Не должна ломаться, пока веб-сайт виден с любых устройств.
 Информация / Примечание
Сложно создать адаптивный дизайн, используя только HTML. Лучше комбинировать с CSS Float, CSS медиа-запросами, CSS flexbox, CSS-сетками или фреймворком CSS, таким как Bootstrap.  ×
Закрыть оповещение
 Используя CSS и HTML, мы можем создать адаптивную веб-страницу.
  Примечание / предложение / улучшение:  
 Вы можете использовать  width: 100%  для изображений в атрибуте style, чтобы изображение было отзывчивым.
 Пример адаптивного изображения 
 


 
 Пример адаптивного изображения 
 
 
 
 Пример размера адаптивного шрифта 
 



 Адаптивный HTML-дизайн 
 Создать адаптивный текст 
 vw - единица, используемая для увеличения размера текста, где 1vw = 1% 



 
 Пример адаптивной страницы 
 

<стиль>
* {
размер коробки: рамка-рамка;
}
.menu {
плыть налево;
ширина: 25%;
выравнивание текста: центр;
}
.menu a {
цвет фона: коралловый;
отступ: 6 пикселей;
маржа сверху: 12 пикселей;
дисплей: блок;
ширина: 100%;
черный цвет;
}
.основной {
плыть налево;
ширина: 55%;
отступ: 0 20 пикселей;
}
.верно {
цвет фона: коралловый;
плыть налево;
ширина: 20%;

отступ: 20 пикселей;
маржа сверху: 7 пикселей;
выравнивание текста: центр;
}

@media only screen и (max-width: 650px) {
.menu, .main, .right {
ширина: 70%;
}
}


 
 Интервью Вопросы и ответы 
 Адаптивный веб-дизайн означает, что веб-сайт должен реагировать на все устройства, такие как настольный компьютер, ноутбук, iPhone, Android, планшеты и т. Д. 
 Веб-сайт должен правильно настраиваться на всех устройствах в соответствии с формой и размером устройств. Адаптивный веб-сайт будет хорошо и привлекательно выглядеть на всех устройствах, и ни одна из ссылок, изображений, шрифтов и т. Д. Не должна ломаться, пока веб-сайт виден с любых устройств.
 Область просмотра - это область веб-страницы, содержимое которой отображается для пользователя. Это зависит от размера экрана устройств, на которых виден веб-сайт. 
  Например, , для рабочего стола область просмотра имеет больший размер по сравнению с телефоном или планшетом.
  Синтаксис: - 
 
 
 Что такое адаптивный веб-дизайн? 
 Адаптивный веб-дизайн - это подход к созданию веб-сайта, который учитывает различные типы устройств, которые посетитель может использовать для доступа к сайту.Адаптивный веб-дизайн регулирует отображение контента на странице в соответствии с размерами экрана устройства. Это прямо контрастирует с неотзывчивым веб-дизайном, который поддерживает одни и те же свойства независимо от того, какой размер экрана используется.
 Примером неадаптируемой страницы веб-дизайна является страница, которая хорошо читается в браузерах настольных компьютеров, но имеет очень маленький, нечитаемый текст на смартфонах, часто из-за слишком большого количества столбцов или изображений, которые слишком велики, чтобы поместиться в ограниченном окне просмотра смартфона. ширина.Благодаря адаптивному веб-дизайну веб-разработчикам не нужно сосредотачиваться на определенных размерах дисплея; скорее, их отзывчивый веб-код предназначен для автоматической адаптации к разным размерам дисплеев.
 Как сделать сайт адаптивным 
 Адаптивный дизайн веб-сайта состоит из трех основных компонентов:
  Гибкие макеты  - Использование гибкой сетки для создания макета веб-сайта, размер которого будет динамически изменяться до любой ширины.
  Медиа-запросы  - Расширение типов мультимедиа при нацеливании и включении стилей.Медиа-запросы позволяют дизайнерам указывать разные стили для конкретных условий браузера и устройства.
  Гибкие носители  - Делает носители (изображения, видео и другие форматы) масштабируемыми, изменяя размер носителя при изменении размера области просмотра.
 Для создания адаптивных веб-сайтов можно использовать различные методы адаптивного дизайна. Чаще всего веб-разработчики устанавливают основные и второстепенные точки останова на основе тегов области просмотра и медиа-запросов CSS.Затем на сайт добавляется код для создания оптимизированного макета контента на основе размеров отображения между установленными точками останова.
 Еще один ключ к адаптивному веб-дизайну - максимально возможное использование относительных значений в отличие от фиксированных атрибутов, таких как ширина. Это позволяет масштабировать контент в зависимости от устройства и платформы, которые читатель использует в данный момент. Обе эти тактики также можно реализовать с помощью базового шаблона или темы, поддерживающей адаптивный дизайн.
 Почему так важен адаптивный веб-дизайн? 
 Адаптивный веб-дизайн важен по ряду причин, в первую очередь связанных с пользовательским интерфейсом и производительностью сайта.Во-первых, он упрощает чтение / просмотр текста и изображений для тех, кто пользуется мобильным телефоном или планшетом, поскольку экран меньше, чем у стандартного настольного компьютера. Это особенно важно, потому что просмотр с мобильных устройств продолжает расти, а значительная часть большей части трафика веб-сайтов обеспечивается ссылками в социальных сетях. Адаптивный дизайн также полезен для пользователей, которые могут просматривать сокращенное окно браузера рабочего стола или режим разделенного экрана.
 Он также сигнализирует поисковым системам, что страница оптимизирована для любого просмотра, что повышает эффективность SEO.С этой целью в 2015 году Google объявил, что отзывчивость мобильных устройств станет ключевым фактором при определении рейтинга в поисковых системах, эффективно переориентируя адаптивный дизайн как важнейший компонент ключевых показателей эффективности веб-сайта.
 Адаптивный веб-дизайн и адаптивный веб-дизайн 
 Адаптивный веб-дизайн развивает принципы адаптивного дизайна на один шаг вперед, учитывая уникальные потребности человека, открывающего страницу с мобильного устройства. Адаптивный дизайн особенно заботится о сенсорных функциях и обеспечении четкого отображения наиболее актуальной информации.Адаптивный веб-дизайн также может включать элементы управления для определения уникальных настроек устройства пользователя, таких как яркость дисплея, размер текста и язык по умолчанию.
 В то время как адаптивный веб-дизайн ставит во главу угла работу сайта на настольном компьютере, а во вторую - мобильность, адаптивный веб-дизайн учитывает оба взаимодействия одновременно и с равным весом. Это означает, что адаптивный веб-дизайн обычно занимает гораздо больше времени, чем простой адаптивный дизайн, но готовый продукт обычно предлагает гораздо лучший пользовательский интерфейс.
 Как создавать адаптивные веб-сайты с помощью HTML и CSS 
 Здесь мы настроим структуру домашней страницы, а затем добавим несколько медиа-запросов. Это поможет быстрее загрузить сайт, а также поможет улучшить навигацию и сохранить внешний вид веб-сайта по желанию на разных устройствах, платформах и разрешениях.
 Прежде чем перейти к реальным вещам, давайте рассмотрим метатег «viewport». Многие из нас могут знать, что Apple iPhone и iPod touch в основном запрограммированы таким образом, чтобы автоматически уменьшать размер веб-сайтов в версии Safari для iOS, что позволяет конечному пользователю просматривать веб-сайт в заданном режиме, тем самым уменьшая его так, чтобы то же самое может уместиться на экране меньшего размера.По той причине, что мы будем создавать медиа-запрос специально для экрана, мы не будем требовать, чтобы iPhone масштабировал его. Метатег области просмотра также позволяет устанавливать параметры, чтобы гарантировать атрибут, к которому зритель может увеличивать или уменьшать масштаб. Также это позволит проверить, в каком масштабе ваш сайт должен изначально загружаться. Это руководство поможет вам узнать, как создать адаптивный веб-сайт, не уменьшая его вообще.
 Приведенный ниже код будет отражать очень простой материал HTML5, который включает исключение нашего метатега области просмотра и нашего основного фонового div.
  Листинг 1 : Определение метатега представления и фонового div
 









    
 

 
 Теперь мы создадим файл CSS, когда у нас уже есть HTML, давайте создадим наш файл CSS, для которого мы сначала сбросим наши настройки CSS, что будет сделано путем избавления от нежелательных полей, отступов и границ с помощью этого базового элемента код для начала моего файла CSS.
  Листинг 2 : Создание файла CSS
 Body, div, img, h2, h3, h4, h5, h5, h6, p, ul, ol, li, dl, dd, dt,
цитата, набор полей, легенда, метка, ввод, текстовое поле {
    маржа: 0; отступ: 0; граница: 0;
}
sh2, h3, h4, h5, h5, h6, p {
    маржа: 0 0 1em 0;
}
h2 {размер шрифта: 200%;}
h3 {размер шрифта: 170%;}
h4 {размер шрифта: 160%;}
h5 {размер шрифта: 140%;}
h5 {font-size: 120%;} 
 Теперь мы можем открыть наш тег тела и добавить к нему некоторый стиль.Здесь мы устанавливаем белый цвет фона и темно-серый цвет для моего текста. Использование белого фона с черным текстом часто приводит к слишком резкому контрасту. Это также может вызвать напряжение у зрителей, поэтому использование темно-серого цвета помогает избежать этой проблемы.
 HTML, body {height: 100%; } 
 Также можно заметить, что мы использовали размер шрифта с использованием em, что считается важным шагом, особенно при разработке адаптивных веб-сайтов. Это по той причине, что он основан на процентном соотношении, которое будет динамически настраиваться на лету.Если бы вы должны были установить для шрифта определенный размер в пикселях, то в этом случае, когда ваш сайт был уменьшен до размеров мобильного телефона, то же самое не будет так хорошо сочетаться с остальной частью вашего дизайна. Также он может занимать весь экран, или буквы могут перекрывать друг друга.
 Этот стиль можно включить в наш класс .homeContent, а также в наш идентификатор #mainBG. Мы определили высоту страницы, также установили ширину на 100% и, наконец, центрировали содержимое внутри.homeContent класс. Мы также установили для свойства background-size значение «cover», которое фактически масштабирует изображение, чтобы заполнить экран. Это позволит фоновому изображению сохранить правильные пропорции при большом разрешении. Размер фонового изображения big.jpg - 1920 x 1189.
  Листинг 3 : Определение класса .homeContent и #mainBG
 .homeContent {
    высота: 100%;
    ширина: 100%;
    положение: относительное;
    маржа: 0 авто;
}

#mainBG {
   фон: url (images / big.jpg) прокрутка без повтора;
background-position: center;
размер фона: обложка;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
} 
 Давайте теперь напишем медиа-запросы, раз уж мы ввели основы. Первые два параметра предназначены для планшетов. Мы будем использовать фоновое изображение среднего размера. Это просто по той причине, что вы можете найти некоторых зрителей на планшетах, которые могут сильно полагаться на свою сеть при загрузке сайта, и им не нужно тратить зря данные или время на загрузку изображения, вдвое превышающего размер экрана.Здесь у нас есть размер фонового изображения medium.jpg 1024 x 770. Оно также будет расположено таким образом, чтобы оно по-прежнему правильно отображалось на различных планшетах.
  Листинг 4 : Написание медиа-запросов для планшета
 @media only screen and (max-width: 1024px) and (Ориентация: альбомная) {
   #mainBG {background: url (images / medium.jpg) 50% 0 прокрутка без повтора! important;
background-position: center;
размер фона: обложка;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
}
}
@media only screen и (min-width: 768px) и (max-width: 991px) {
#mainBG {background: url (images / medium.jpg) 50% 80% прокрутка без повтора! важно;
background-position: center;
размер фона: обложка;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
}
} 
 Давайте напишем последний медиа-запрос, который будет для мобильных телефонов, в который мы будем вставлять фоновое изображение small.jpg по тем же причинам, которые были указаны в запросе планшета. У нас есть фоновое изображение small.jpg размером 767 x 475.
  Листинг 5 : Написание медиа-запросов для мобильного телефона
 @media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG {background: url (images / small.jpg) 75% 80% прокрутка без повтора! важно;
background-position: center;
размер фона: обложка;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
}
} 
 Пора предварительно просмотреть свою работу в браузере, где вам нужно начать с полноэкранного просмотра окна браузера, затем сжать его, а затем посмотреть, как изображение немедленно начинает приспосабливаться к новым размерам. Проверьте, можете ли вы определить, где происходят ваши медиа-запросы, и ваше фоновое изображение меняется на уменьшенное.
 Пример вывода: 
  Рисунок 1 : Иллюстрация адаптивного веб-сайта на компьютере, планшете и мобильном телефоне
 Заключение 
 Мы узнали, как создавать адаптивные веб-сайты с помощью HTML, не уменьшая его масштаб для настройки экрана Windows.