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

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

Браузеры, поддерживающие запросы СМИ

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

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

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

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

Настроить окно дисплея

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

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

Обеспечивает доступное окно просмотра

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

Устанавливает содержимое в окно просмотра

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

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

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

Применяет медиа-запросы к окну просмотра

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

Используйте любые указатели и любые зависания для гибких взаимодействий

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

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

Выбор контрольных точек

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

Выбирает основные точки останова, начиная с малого, а затем расширяя диапазон

Вместо этого, в идеале, контент определяет, как дизайн вписывается в элемент контейнера.


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

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


Решение немного субъективно, но значение выше 600 пикселей, несомненно, является чрезмерной шириной.

Принимает небольшие контрольные точки при необходимости

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

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

Оптимизировать текст для чтения

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

Никогда полностью не скрывайте контент

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

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