Некоторые особенности адаптивного сайтостроения.

Проблема длинных слов

Иногда горизонтальная полоса прокрутки может появиться и от очень длинного слова, когда оно не помещается на экране. Например это может быть URL-адрес оставленный в комментарии. Подробнее об этой проблеме и ее решении я писал ранее: https://moonback.ru/page/long-word-problem. CSS-код для устранения проблем с адаптивностью будет выглядеть так:

.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Адаптивное меню сайта

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

Чтобы реализовать задуманное необходимо создать два взаимоисключающих объекта. К примеру основное меню должно быть скрыто на мобильных экранах, но при этом должна появиться кнопка открывающая это меню. На экранах компьютеров наоборот: основное меню должно быть видно, а кнопка его вызова скрыта.
На CSS это реализуется очень просто.

#mainmenu {display:block;}
#mobilemenu{display:none;}
@media only screen and (max-width : 1199px) {
#mainmenu {display:none;}
#mobilemenu{display:block;}
}

Как только ширина экрана станет меньше 1200 пикселей, то основное меню исчезнет с экрана, а появится ссылка на его открытие (точнее будет показан блок со ссылкой или кнопкой). Обратите внимание, что в данном случае используются ID блоков, а не класс стилей. И код основного меню будет выглядеть примерно так:

<div id="mainmenu">Основное меню сайта</div>

Чтобы показать основное меню по нажатию на кнопку, добавим небольшой скрипт в секцию
HEAD:

<script language="JavaScript" type="text/JavaScript">
function showmobilemenu() { 
if (document.getElementById('mainmenu').style.display == "block")
   {document.getElementById('mainmenu').style.display = "none"}
else 
   {document.getElementById('mainmenu').style.display = "block"}
}
</script>   

А сам блок со ссылкой на открытие основного меню может выглядеть примерно так:

<div id="mobilemenu">
<a href="javascript:void(0)" onclick="showmobilemenu()">[+] MENU</a>
</div>