Как сделать адаптивный сайт и удобный просмотр на мобильных устройствах
Каждый сайт в настоящее время просто обязан быть адаптирован под мобильные устройства, так как с таких устройств доля трафика значительная. Если же сайт не приспособлен для телефонов и прочих гаджетов, тогда посетители просто закроют такой сайт и уйдут на сайт конкурента. Также поисковые системы отдают предпочтение адаптированным ресурсам.
Для того, чтобы сделать адаптивный сайт, потребуются некоторые знания html и css. Адаптивность предполагает автоматическое определение параметров устройства, на основе которых сайт представляется соответствующим образом. Раньше для этого делали специальные отдельные домены, на которых размещался мобильный контент, но это нерентабельно в настоящее время. При разработке адаптивности сайта, для отладки можно использовать мобильный эмулятор, встроенный в консоль разработчика Google, для его открытия необходимо нажать F12, затем Ctrl+Shift+M.
Адаптивный сайт основывается на каркасе, блоках на странице, которые имеют относительные величины ширины, поэтому важно отказаться от абсолютных величин и прибегнуть к использованию относительных. Но не стоит такие величины прописывать везде, нужно подойти к этому процессу избирательно, писать их там, где они действительно нужны.
Чтобы сделать удобный просмотр сайта необходимо использовать медиа-запросы, с помощью них можно определять минимальный или максимальный размер экран и соответственно прописать css-правила для этого размера. Медиа-запросы в настоящее время поддерживаются большинством современных браузеров, в том числе мобильных, что делает их использование беспроблемным. Достаточно определить конкретные точки размеров экранов и составить правила для них, эти правила будут применены на этих разрешениях экранов, а как только правило не будет соответствовать – будут применены другие правила или правила по умолчанию.
Можно использовать готовые библиотеки для верстки, но можно и самому построить один раз каркас для сайта и далее использовать его везде, где потребуется. Самостоятельные наработки предпочтительнее, хотя кто-то и называет их «велосипедами» или «костылями», но только так можно понять, как в действительности всё работает, что предаст большей гибкости проекту. Кроме того, сторонние библиотеки – это всегда лишний код, часть которого не будет вообще использоваться.
Таким образом, для качественного адаптивного сайта необходимо при разработке прибегнуть к использованию медиа-запросов, составить css-правила для всех нужных разрешений экранов и правильно разработать каркас из html-блоков на странице.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку