По данным исследователей рынка McKinsey & Company , 61% пользователей Google не вернутся на сайт, который они не могут правильно использовать на смартфоне, и 40% из этой группы посетят сайт конкурента. Начиная с 2015 года Google также начал ранжировать сайты, оптимизированные для мобильных устройств, выше, чем сайты, не отвечающие на запросы. Таким образом, адаптивный дизайн стал обязательным для любого профессионального веб-сайта.
Использование CSS3 для создания адаптивных кнопок
Сделать сайт удобным для мобильных устройств на самом деле довольно просто, но это требует дополнительной работы, особенно с вашей каскадной таблицей стилей (CSS). После того, как вы создали код для своих кнопок, вы создаете «медиа-запросы» для различных размеров устройств, которые могут использоваться для просмотра вашего веб-сайта.
Запрос СМИ в основном набор CSS кода , который регулирует размер элементов на странице , в зависимости от размера экрана устройства.
Пример HTML-кода
В приведенном ниже примере представлен простой HTML-код для трех кнопок.
| <!ДОКТИП HTML> <голова> <meta name=”viewport” content=”width=device-width, initial-scales=1″> <link href=”styles.css” rel=”stylesheet”> </голова> <тело> <div id=”примеры кнопок”> <a href=”http://www.lovetoknow.com” target=”_blank” class=”btn btn-blue”>Кнопка</a> <a href=”http://www.lovetoknow.com” target=”_blank” class=”btn btn-green”>Кнопка</a> <a href=”http://www.lovetoknow.com” target=”_blank” class=”btn btn-red”>Кнопка</a> </div> </тело> </html> |
В приведенном выше коде «область просмотра» означает область страницы, видимую на экране посетителя. Эта строка кода очень важна, поскольку без нее мобильное устройство не будет отображать адаптивный контент.
Пример кода CSS
Первым шагом будет создание класса, который стилизует все кнопки. В этом примере этот класс называется «btn».
| .btn { выравнивание текста: по центру; текстовое оформление: нет; вес шрифта: полужирный; размер шрифта: 20px; семейство шрифтов: без засечек, arial; цвет: #ffffff; радиус границы: 10px; отступ: 15px 20px; поле справа: 15px; поле слева: 15px; } |
Еще три класса ниже придают каждой кнопке уникальный вид. В этом примере каждая кнопка имеет свой цвет фона: синий, зеленый и красный.
| .btn-синий { цвет фона: #2E86C1; } .btn-зеленый { цвет фона: #28B463; } .btn-красный { цвет фона: #FF0000; } |
Также создается состояние наведения, при котором фон кнопки становится черным при наведении на нее курсора мыши.
| а: наведите { цвет фона: #000000; } |
С помощью этого кода, связанного с вашей HTML-страницей, вы можете создать три кнопки, как показано ниже.
Делаем кнопки отзывчивыми
Когда базовый дизайн кнопки готов, пришло время добавить медиа-запросы.
Существует много типов запросов, и дизайнер может сделать их достаточно конкретными, если у него есть на это время и желание. Каждое устройство имеет свой собственный набор размеров экрана, но часто гораздо проще указать общие контрольные точки, охватывающие большинство устройств. Это показано в приведенном ниже коде с устройством, указанным в строке комментария выше.
Запрос предназначен для просмотра либо одного диапазона размеров экрана, либо между диапазонами. Например, в первом запросе ниже запрос предназначен для экранов с разрешением 320 пикселей или меньше. Во втором примере для общего размера смартфона диапазон устанавливается для адаптации к экранам не менее 320 пикселей и не более 480 пикселей.
| /* это типичные размеры iPhone */ Только экран @media и (max-device-width: 320px) { #buttonExamples {размер шрифта: 150%;} } /* это типичные размеры для смартфона */ Только экран @media и (минимальная ширина устройства: 320 пикселей) и (максимальная ширина устройства: 480 пикселей) { #buttonExamples {размер шрифта: 150%;} } Только экран @media и (минимальная ширина устройства: 480 пикселей) и (максимальная ширина устройства: 768 пикселей) { #buttonExamples {размер шрифта: 150%;} } /* это типичные размеры устройства/настольного компьютера среднего размера */ Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 992 пикселей) { #buttonExamples {размер шрифта: 150%;} } /* это типичные размеры для большого экрана*/ Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1200 пикселей) { #buttonExamples {размер шрифта: 150%;} } |
Вы можете использовать эти точки останова, которые чаще всего используются в популярной среде HTML, CSS и Javascript Bootstrap , или вы можете поиграть с различными размерами и стилями в зависимости от вашего дизайна.
Тестирование запросов
В процессе проектирования и кодирования важно убедиться, что ваши запросы работают правильно. Вы можете сделать это с помощью веб-браузера Google Chrome.
- Откройте веб-сайт в Chrome.
- Щелкните правой кнопкой мыши, чтобы открыть раскрывающееся меню.
- Выберите «Проверить».
- Внизу появится горизонтальный разделенный экран, и будет отображаться исходный код.
- В левом верхнем углу нажмите на второй значок, который выглядит как два прямоугольника разного размера. Это используется для тестирования адаптивных элементов. См. красную стрелку на скриншоте ниже.
Когда сайт находится в режиме адаптивного тестирования, справа появляется набор маркеров (см. желтую стрелку на изображении выше), и, удерживая кнопку мыши, вы можете перетащить экран до размера, который хотите протестировать. Ширина и высота размера появятся в верхней части экрана прямо под панелью навигации Chrome.
Например, вот экран, растянутый до размера 480 пикселей в ширину. Кнопки будут становиться меньше по мере уменьшения размера экрана, оставаясь при этом читабельными. Они также будут увеличиваться в размерах по мере расширения экрана.
После завершения тестирования снова щелкните значок двойного прямоугольника, чтобы выйти из адаптивного режима. Затем нажмите «x» в правом верхнем углу окна инспектора, чтобы закрыть его.
Если во время тестирования дизайн выглядит неправильно, пора вернуться к работе с медиа-запросами CSS3, пока все не будет выглядеть правильно. Вот почему тестирование является важной частью процесса разработки!
Еще один способ проверить, подходит ли ваш контент, например кнопки, для мобильных устройств — использовать бесплатный тест Google для мобильных устройств . Он проверяет URL-адрес на предмет его уровня адаптивности к мобильным устройствам.
Важность адаптивного дизайна
Изучение того, как использовать медиа-запросы и как правильно спроектировать веб-сайт, чтобы он реагировал на мобильные устройства, является важным навыком для любого веб-разработчика. Использование мобильных устройств превышает использование персональных компьютеров и ноутбуков, и ожидается, что эта тенденция будет только усиливаться в будущем.