Теперь уже можно приступить к мобильной оптимизации. В первую очередь нужно исправить проблему <header>-а. Когда экран уменьшается он, выходит за пределы сайта и это очень плохо. Одним из хороших решений это сделать бургер меню, то есть при уменьшении экрана он измениться в трёх линейней блок. Сперва нам нужно создать сам блок. Он должен находиться между логотипом и навигацией. Добавим внутрь <header>-а два значения:
Այժմ դուք կարող եք սկսել բջջային օպտիմիզացումը: Առաջին հերթին մենք պետք է շտկենք <header>-ի խնդիրը։ Երբ էկրանը նվազում է, այն դուրս է գալիս կայքից և սա շատ վատ է: Լավ լուծումներից մեկը բուրգերային մենյու պատրաստելն է, այսինքն՝ էկրանը փոքրացնելուց հետո այն կվերածվի եռագիծ բլոկի։ Նախ պետք է ինքնին բլոկը ստեղծենք: Այն պետք է լինի լոգոյի և նավիգացիայի միջև: Եկեք ավելացնենք երկու արժեք <header>-ի ներսում.
Через input мы создаём некий переключатель чтобы он отреагировал на нажатия. Он имеет либо вид: включён либо выключен. Потом мы добавили label, для того чтобы сделать линии и подключили через id input-а. Должно выглядеть вот так:
input-ի միջոցով մենք ստեղծում ենք անջատիչ, որպեսզի այն արձագանքի սեղմումներին։ Այն կա՛մ միացված է, կա՛մ անջատված: Այնուհետև մենք ավելացրինք labelտողերը պատրաստելու համար և միացրինք id-ի input-ի միջոցով: Այն պետք է այսպիսի տեսք ունենա.
Теперь давайте настроим стили и покажем что к чему:
Հիմա եկեք կարգավորենք ոճերը և ցույց տանք, թե ինչը ինչ է:
Очень много всего тут и такое чувство, что всё сложно. Попробуйте ещё раз прочитать и посмотри видео чтобы было понятнее:
Այստեղ շատ բաներ կան, և թվում է, թե ամեն ինչ բարդ է: Փորձեք նորից կարդալ այն և ավելի լավ հասկանալու համար դիտեք տեսանյութը.
Теперь время пришло добавлять медиа запросы. Начнём мы с верхней части до низа:
Այժմ ժամանակն է ավելացնել մեդիա հարցումներ: Սկսենք վերևից ներքև.
Теперь наш текст исчезает когда, доходит до 991px. Но нам также нужно убрать меню до 991px. По этому вместо max-width напишем min-height и уберём с помощью display:
Այժմ մեր տեքստը անհետանում է, երբ հասնում է 991px: Բայց մենք նաև պետք է մենյուն իջեցնենք մինչև 991px: Հետևաբար, max-width-ի փոխարեն մենք կգրենք min-height և կհեռացնենք այն օգտագործելով display:
Нам остался всего лишь изменить размер нижнего блока для мобильных устройств: блок horizontal-line;
Մենք պարզապես պետք է փոխենք ներքևի բլոկի չափը շարժական սարքերի համար -> horizontal-line բլոկը;
Добавим ещё несколько мелких деталей. Чтобы при наведении на ссылок, он изменял цвет и сделаем так, чтобы при нажатии тексты были сверху внизу. Это нужно добавить в наш медиа запрос:
Ավելացնենք ևս մի քանի մանր մանրամասներ։ Այնպես որ, երբ դուք սավառնում եք հղումների վրա, այն փոխում է գույնը, և մենք կդարձնենք տեքստերը վերևից ներքև, երբ սեղմեք: Սա պետք է ավելացվի մեր լրատվամիջոցների հարցմանը.
Ещё для вас новым будет параметр :hover. :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.
Ձեզ համար նորություն կլինի նաև :hover պարամետրը։ :hover-ը գործարկում է, երբ օգտատերը մկնիկի օգնությամբ սավառնում է տարրի վրա, բայց պարտադիր չէ, որ այն ակտիվացնի:
Поздравляю!!! Вы собрали ваш первый макет. Теперь давайте посмотрим на статистику макета:
Շնորհավորում եմ!!! Դուք ավարտել եք ձեր առաջին դասավորությունը: Հիմա եկեք նայենք դասավորության վիճակագրությանը.
Статистика говорит что у нас почти всё идеально, но будет круто если все показатели у нас будут 100%. Гугл ругается на то что нужно использовать более оптимизированные форматы картинок. Например, webp или jpg. Мы будем использовать webp. После конвертации измените все .png на .webp.
Վիճակագրությունը ասում է, որ մենք ունենք գրեթե ամեն ինչ կատարյալ, բայց լավ կլինի, եթե մեր բոլոր ցուցանիշները լինեն 100%: Google-ը բողոքում է այն փաստի վրա, որ դուք պետք է օգտագործեք ավելի օպտիմիզացված պատկերների ձևաչափեր: Օրինակ՝ webp կամ jpg։ Մենք կօգտագործենք webp. Փոխակերպումից հետո բոլոր .png-ը փոխեք .webp-ի:
Статистика показывает что всё находиться на 100% уровне. Чтобы исправлять ошибки, которые могут появиться вам нужно посмотреть на что именно ругается гугл. Ну можно сказать на этом обучение закончено.
Վիճակագրությունը ցույց է տալիս, որ ամեն ինչ 100%-անոց մակարդակի վրա է։ Սխալները շտկելու համար, որոնք կարող են հայտնվել, դուք պետք է նայեք, թե կոնկրետ ինչի վրա է Google-ը հայհոյում: Դե, կարելի է ասել, որ պրակտիկան ավարտվել է։