С помощью оптимизации сайта под мобильные устройства можно отображать ресурс на любых носителях. Это позволит вам решить ряд функциональных проблем сайта, влияющих на его популярность у пользователей и роботов поисковых систем Яндекс, Google и т.п. Посетители имеют возможность просматривать полноформатные страницы не только на экранах персональных компьютеров, но и на смартфоне и планшете. Размер изображения на десктопе не соответствует формату, который мы используем в смартфонах: изображение кажется маленьким и для прочтения нужно увеличить текст вручную. Из-за этого возникает дискомфорт у потенциального пользователя. Для просмотра сайта со смартфона нужна адаптивность – функция для корректного отображения на различных устройствах.
Օպտիմիզացնելով ձեր կայքը շարժական սարքերի համար՝ դուք կարող եք ռեսուրս ցուցադրել ցանկացած սարքի վրա: Սա թույլ կտա լուծել կայքի մի շարք ֆունկցիոնալ խնդիրներ, որոնք ազդում են նրա հանրաճանաչության վրա Yandex, Google և այլն որոնման համակարգերի օգտատերերի և ռոբոտների շրջանում: Այցելուները հնարավորություն ունեն դիտելու լրիվ չափի էջեր ոչ միայն անհատական համակարգիչների էկրաններին, այլեւ սմարթֆոնների ու պլանշետների։ Պատկերի չափը աշխատասեղանի վրա չի համընկնում սմարթֆոնների վրա օգտագործվող ձևաչափի հետ. պատկերը փոքր է թվում, և այն կարդալու համար պետք է ձեռքով մեծացնել տեքստը: Սա անհարմարություն է առաջացնում պոտենցիալ օգտագործողի համար: Կայքը սմարթֆոնից դիտելու համար անհրաժեշտ է հարմարվողականություն՝ տարբեր սարքերում ճիշտ ցուցադրման ֆունկցիա...
Адаптивный дизайн – самый простой и эффективный способ общего приспособления веб-ресурса. Его суть заключается в том, что код сайта HTML остается без изменений. Наши задачи - изменить дизайн сайта, сделать его более адаптивным. Обычно для вёрстки адаптивных сайтов часто требуется, чтобы какой-то набор стилей применялся только при соблюдении определенных условий. Например, шрифт текста должен измениться на маленький размер если это мобильное устройства. Или блок займёт всю ширину родителя, если ширина экрана больше или равна 1200 пикселям. Для подобных случаев и существуют медиа выражения. Они помогают адаптировать вёрстку под разные экраны и устройства и при этом не писать лишний код. Давайте подробнее рассмотрим структуру медиа запросов:
Responsive design-ը վեբ ռեսուրսն ընդհանրապես հարմարեցնելու ամենապարզ և ամենաարդյունավետ միջոցն է: Դրա իմաստը կայանում է նրանում, որ HTML կայքի կոդը մնում է անփոփոխ։ Մեր խնդիրն է փոխել կայքի դիզայնը, դարձնել այն ավելի հարմարվողական։ Սովորաբար, արձագանքող կայքերի դասավորությունը հաճախ պահանջում է, որ որոշ ոճեր կիրառվեն միայն այն դեպքում, երբ բավարարված են որոշակի պայմաններ: Օրինակ, տեքստի տառատեսակը պետք է փոխվի փոքր չափի, եթե այն շարժական սարք է: Կամ բլոկը կզբաղեցնի ծնողի ամբողջ լայնությունը, եթե էկրանի լայնությունը մեծ է կամ հավասար է 1200 պիքսելին: Նման դեպքերի համար կան մեդիա արտահայտություններ։ Նրանք օգնում են հարմարեցնել դասավորությունը տարբեր էկրաններին և սարքերին՝ առանց լրացուցիչ կոդ գրելու: Եկեք ավելի սերտ նայենք մեդիա հարցումների կառուցվածքին.
Все медиа запросы начинаются с ключевого слова @media screen, за которым в круглых скобках указывается максимальная ширина разрешения, где медиа запрос не будет работать. Другими словами, если разрешение экрана больше 1200px, этот медиа-запрос не будет работать. Если в медиа запросе вместо max-width указано min-width.
Բոլոր մեդիա հարցումները սկսվում են @media screen հիմնաբառով, որին հաջորդում է փակագծերում առավելագույն էկրանի լայնությունը, որտեղ մեդիա հարցումը չի աշխատի: Այլ կերպ ասած, եթե էկրանի չափսը 1200px-ից մեծ է, այս մեդիա հարցումը չի աշխատի: Եթե մեդիա հարցումը max-width-ի փոխարեն նշում է min-width.
Здесь все наоборот: этот медиа-запрос выполняется, когда разрешение экрана составляет 1200px или выше. Стиль css в медиа запросе ссылается на селектор и его свойства css.
Այստեղ հակառակն է՝ այս մեդիա հարցումը կատարվում է, երբ էկրանի չափսը 1200px է կամ ավելի է: Մեդիա հարցման մեջ css ոճը վերաբերում է նշիչին և նրա css հատկություններին:
В нем говорится, что если разрешение экрана меньше 1200px, фон тега <body> будет зеленым. Вы также можете указать интервал.
Այն ասում է, որ եթե էկրանի չափսը 1200px-ից պակաս է, ապա <body> թեգի ֆոնը կանաչ կլինի։ Կարող եք նաև նշել հեռավորություն:
Здесь зеленый фон применяется к диапазону ширины тега <body> от 800px до 1200px.
Այստեղ կանաչ ֆոնը կիրառվում է <body> թեգի լայնության միջակայքում 800px-ից մինչև 1200px։
Наконец, мы обсудим еще одну особенность медиа запросов: включение файлов CSS при изменении разрешения.
Վերջապես, մենք կքննարկենք մեդիա հարցումների մեկ այլ առանձնահատկություն՝ ներառյալ էկոնի չափսի փոփոխության վերաբերյալ CSS ֆայլերը:
Эта строка записывается в теге <head>, а атрибут @media определяет условие медиа запроса и путь href к css-файлу, который будет подключен при выполнении условия медиа запроса. Если разрешение экрана меньше 1200px, в страницу будут включены стили, описанные в файле second-style.css.
Այս տողը գրված է <head> թեգում, և @media հատկանիշը սահմանում է մեդիա հարցման պայմանը և css ֆայլի href ուղին, որը կներառվի, երբ մեդիա հարցման պայմանը բավարարվի: Եթե էկրանի չափը 1200 պիքսելից պակաս է, էջը կներառի second-style.css ֆայլում նկարագրված ոճերը:
Ориентация позволяет задать определенный стиль в зависимости от того, в каком режиме отображается сайт - альбомном или портретном. Например, в зависимости от ориентации области просмотра будут отображаться разные изображения.
Կողմնորոշումը թույլ է տալիս սահմանել որոշակի ոճ՝ կախված նրանից, թե կայքը կցուցադրվի լանդշաֆտային կամ դիմանկարային ռեժիմում: Օրինակ, կախված դիտակետի կողմնորոշումից, կցուցադրվեն տարբեր պատկերներ:
Конечно, это еще не адаптивный макет, но вы сделали первый шаг. После того как узнали что такое медиа нужно и знать что такое viewport. Viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства. Раньше все было просто: если разрешение экрана было примерно одинаковым, а ширина макета - одной, никто не жаловался. Теперь это гораздо сложнее. Пользователи заходят на страницы с различных устройств, и разрешения экранов сильно различаются. Для примера, давайте добавим текст на сайт и увидим как он выглядит:
Իհարկե, դա դեռ responsive design չէ, բայց դուք կատարել եք առաջին քայլը: Այն բանից հետո, երբ դուք գիտեք, թե ինչ է մեդիան, դուք պետք է իմանաք, թե ինչ է viewport-ը: Viewport-ն այն տարածքն է, որը օգտատերը տեսնում է էկրանին, երբ ցանկացած սարքից մտնում է կայքի էջ: Նախկինում ամեն ինչ պարզ էր. եթե էկրանի չափսը մոտավորապես նույնն էր, իսկ դասավորության լայնությունը մեկ էր, ոչ ոք չէր դժգոհում: Հիմա շատ ավելի դժվար է։ Օգտատերերը մուտք են գործում էջեր տարբեր սարքերից, և էկրանի չափսը մեծապես տարբերվում են: Օրինակ, եկեք տեքստ ավելացնենք կայքում և տեսնենք, թե ինչ տեսք ունի այն.
Как мы видим текст для декстопной версии выглядит хорошо. Теперь давайте посмотрим как же он выглядит на мобильных устройствах:
Ինչպես տեսնում ենք, աշխատասեղանի տարբերակի տեքստը լավ տեսք ունի: Այժմ տեսնենք, թե ինչպես է այն նայվում շարժական սարքերում.
Текст еле-еле как можно разглядеть. Чтобы увидит что написано, нужно приблизить, а это уже не хорошо. Почему это так плохо? Потому что браузер предполагает, что страница предназначена для настольного компьютера, и пытается втиснуть ее в размеры экрана. Даже сегодня вы, вероятно, все еще видите сайты, которые масштабируется с помощью пальцев. Теперь давайте добавим в наш код одну строчку:
Տեքստը հազիվ է երևում։ Տեսնելու համար, թե ինչ է գրված, պետք է մեծացնել, և սա արդեն լավ չէ։ Ինչու է դա այդքան վատ: Քանի որ բրաուզերը ենթադրում է, որ էջը նախատեսված է համակարգչի համար և փորձում է այն տեղավորել էկրանի չափսերի մեջ: Նույնիսկ այսօր, հավանաբար, դեռևս տեսնում եք կայքեր, որոնք մեծացվում են ձեր մատներով: Հիմա եկեք մեկ տող ավելացնենք մեր կոդին.
По крайней мере, текст можно читать без масштабирования. Мы сказали браузеру, что его нужно оптимизировать для маленьких экранов. Появление экранов с высоким разрешением принесло новые проблемы для разработчиков. Несмотря на одинаковый физический размер, смартфоны могут иметь разное разрешение. В результате текст, который выглядит нормально на одном экране, будет казаться меньше на другом. Метатег viewport решает эту проблему адаптивного дизайна с помощью двух параметров: width и initial-scale. Параметр width=device-width делает ширину области просмотра равной CSS-ширине устройства; CSS - это не физический размер, а некое значение, предназначенное для того, чтобы адаптивный дизайн выглядел одинаково на экране.
Առնվազն տեքստը կարելի է կարդալ առանց մասշտաբի։ Մենք բրաուզերին ասացինք, որ այն պետք է օպտիմիզացնել փոքր էկրանների համար։ Բարձր չափսով էկրանների հայտնվելը նոր մարտահրավերներ է առաջացրել ծրագրավորողների համար: Չնայած նույն ֆիզիկական չափին՝ սմարթֆոնները կարող են ունենալ տարբեր չափսեր։ Արդյունքում, մի էկրանին սովորական տեսք ունեցող տեքստը մյուսի վրա ավելի փոքր կհայտնվի: viewport մետա թեգը լուծում է այս adaptive design-ի խնդիրը երկու պարամետրով` width և initial-scale: width=device-width պարամետրը տեսադաշտի լայնությունը հավասարեցնում է սարքի CSS լայնությանը; CSS-ը ֆիզիկական չափ չէ, այլ արժեք, որը նախատեսված է adaptive design-ը էկրանին նույն տեսքը տալու համար: