Основы адаптивного веб-дизайна
Использование мобильных устройств для просмотра веб-страниц продолжает расти астрономическими темпами, и эти устройства часто ограничены размером дисплея и требуют другого подхода к размещению контента на экране.
Адаптивный веб-дизайн
Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в A List Apart , отвечает потребностям пользователей и устройств, которые они используют. Компоновка меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент в виде одного столбца; планшет может отображать одно и то же содержимое в двух столбцах.
ХОД КОНЕМ
В телефонах, фаблетах, планшетах, настольных компьютерах, игровых консолях, телевизорах и даже носимых устройствах существует множество экранов разных размеров. Размеры экрана постоянно меняются, поэтому важно, чтобы ваш сайт мог адаптироваться к любому размеру экрана, сегодня или в будущем. Кроме того, у устройств есть разные функции, с которыми мы взаимодействуем. Например, некоторые из ваших посетителей будут использовать сенсорный экран. Современный адаптивный дизайн учитывает все эти факторы, чтобы сделать работу удобной для всех.
КАК ПРОИСХОДИТ ХИМИЯ?
Чтобы попытаться обеспечить лучший опыт, мобильные браузеры визуализируют страницу с шириной экрана рабочего стола (обычно около 980px, хотя это зависит от устройства), а затем пытаются улучшить внешний вид содержимого, увеличивая размер шрифта и масштабируя содержимое по размеру экрана. . Это означает, что размеры шрифта могут показаться несовместимыми для пользователей, которым, возможно, придется дважды нажать или ущипнуть для увеличения, чтобы увидеть контент и взаимодействовать с ним.
ТОЧНОСТЬ НАШЕ ВСЁ
Поскольку размеры и ширина экрана в пикселях CSS сильно различаются между устройствами (например, между телефонами и планшетами и даже между разными телефонами), контент не должен полагаться на определенную ширину области просмотра для правильной визуализации.
медиа-запросы CSS5
Медиа-запросы - это простые фильтры, которые можно применять к стилям CSS. Они упрощают изменение стилей в зависимости от типов устройств, отображающих контент, или функций этого устройства, например ширины, высоты, ориентации, возможности наведения курсора и того, используется ли устройство в качестве сенсорного экрана.
SERVICE 6
При выборе содержимого для скрытия или отображения в зависимости от размера экрана. Мы не скрываем контент просто потому, что не можем уместить его на экране. Размер экрана не является окончательным показателем того, чего может хотеть пользователь. Например, исключение количества пыльцы из прогноза погоды может стать серьезной проблемой для страдающих весенней аллергией, которым нужна информация, чтобы определить, могут ли они выйти на улицу или нет.