Понякога онези, които посещават уебсайтове от смартфони и подобни мобилни устройства, причиняват само смях. Мнозина просто не можеха да разберат защо е необходимо, защото има такива удобни стационарни компютри! Или в най-лошия - лаптопи. Освен това мобилният интернет беше скъп. Времето мина. Интернет е по-евтин. Продават се все повече телефони и таблети. След известно време собствениците на популярни сайтове бяха озадачени от надраскване на главите си. Според статистиката се оказва, че техните ресурси са по-често посещавани от смартфони, отколкото от стационарни компютри!
По това време сайтовете не бяха оптимизирани за мобилно сърфиране. След като стигнахте до стария ресурс от телефона, трябва да сте доволни от малки букви, малки елементи от менюто и неудобни бутони.
Появата на CSS Media Queries
Имаше нужда да се създадат ресурси, така че да изглеждат добре, когато се разглеждат от всеки екран. Първоначално разпространяваше практиката за създаване на отделни сайтове за всеки размер. Например, посетител, който е използвал мобилен телефон, е паднал в един ресурс, а този, който „седеше“ от един компютър на друг. Но това беше дълго, скъпо и неудобно.
След това се появиха CSS3 Media Queries. С тяхна помощ, една проста възможност за реализиране на динамичен дизайн.
Какво е динамичен дизайн?
Този термин се използва, ако видът на ресурса варира в зависимост от размера на екрана, на който се гледа. Такаразбираш ли? Всичко е просто. Представете си, че имате уебсайт. Навигационното меню е най-горе. Хоризонтална. Тя се простира до пълната ширина на страницата. По-долу е показан блок с информация за контакт. Телефонът и адресът също са разделени от два блока и са разположени хоризонтално, близо един до друг. Под този блок е основното съдържание и страничната лента се намира отляво или отдясно. По-долу, както обикновено, обувки.
Това е "класическо" разположение на компонентите. Той е чудесен за персонален компютър, но не е много удобен за мобилни телефони. Хоризонталното меню е твърде широко. Контактите са далеч един от друг. За да използвате информацията от страничната лента и изобщо да имате екран за превъртане, не всеки го харесва.
Проблемът може да бъде решен чрез адаптивен и мобилен дизайн с CSS3 Media Queries. С помощта на медийни опашки възстановяваме местоположението на съдържанието, а сега всичко работи по следния начин:
най-отгоре - блок с вертикално меню за навигация;
под него - блок с контакти, които сега също са разположени вертикално;
Съдържанието на страничната лента се показва не от страната на съдържанието на етикета, а от тях NAD.
Това е най-лесният пример за това какво можете да направите с отзивчивите медийни заявки за уеб дизайн. Всъщност възможностите са много повече.
И така, какво са медийните запитвания?
Под термина CSS Media Queries, CSS3 модулът се използва, за да помогне на съдържанието на дадена страница да се адаптира към определени условия. Например, тя започва да отговаря на размера на екрана или ориентацията на устройството(книга /пейзаж).
Как системата разбира какво е необходимо за промяна на съдържанието? За да направите това, използвайте медийни заявки. Те определят определени параметри. Ако устройството, от което посетителят е влязъл в сайта, отговаря на тези параметри, включва предварително написани стилове. Те могат да бъдат записани както в общата таблица на CSS, така и в отделен файл.
Съвместимост с CSS медийни заявки с браузъри
Всички модерни браузъри поддържат тази техника, от Safari до Chrome. Разбира се, потребителите на по-стари версии на Internet Explorer ще имат проблеми, но нека бъдем честни - за тези, които все още използват старата IE, буквално всичко може да предизвика проблеми.
Синтаксис на адаптивно оформление за медийни заявки
Може би вече сте срещали медийни заявки, когато включите стилова таблица в html. Запомни ли тази линия? Понякога към края беше добавена и друга опция, която изглеждаше така: media = 'screen'.
Това е медийно обаждане! Това означава, че зададената стилова таблица ще работи на устройства, оборудвани с екран. Вместо екрана можете да укажете печат - в този случай стиловете на файловете се прилагат, ако страницата се отпечатва. Можете да използвате следните атрибути:
all - опцията по подразбиране, използвана във всички случаи;
scrteen - екрани (компютри, лаптопи, таблети, смартфони и всичко, което е оборудвано с дисплей);
печатници;
прожекционни проектори;
езикови браузъри;
Брайлова азбука - за устройстваза хората с увредено зрение;
телевизия - за телевизионни екрани.
Това не е всичко. Има няколко допълнителни атрибута на CSS Media Queries, но те рядко се използват. Освен това не можете да посочите опцията по подразбиране, за да включите всички.
Структура на заявката за мултимедия
Вместо да създавате стилизиран файл, можете да използвате css кода. Изглежда така: @media екран и (max-width: 1024px) {(ще има стилове) Следвайки директивата @media, която ясно показва, че ще се използва медийна заявка, има указание за вида на устройството (екран) и допълнителни параметри. За този пример се използва свойството за макс ширина на CSS Media Queries, което означава, че скобите, зададени в стила, ще се използват, ако размерът на екрана на потребителя не надвишава 1024 пиксела и не е задължително. max-width: 1024px) {} В този случай ще се използват свойствата
Определете множество параметри
Да предположим, че искате донякъде да ограничите обхвата на устройствата, които ще се използват в стил. който посещава вашия сайт от смартфон, чийто размер на екрана е не по-малък от 320 px, но не повече от 500 px. В този случай заявката приема следната форма: @media (min-width: 320px) и (max-width: 500px) {} Ако сте запознати с програмирането, nj знаят за какво се използва операторът. За тези, които не знаят: той проверява дали двете условия са верни. Това означава да активирате свойстватаекранът за искане трябва да бъде най-малко 320 и не повече от 500 пиксела.
Броят на операторите и не е ограничен до един. Можете да ги поставите точно толкова, колкото искате. Например, опитайте се да създадете определени размери за екрани на смартфони и напълно различни - за телевизори. Важен момент е ориентацията на потребителското устройство. Някой преглежда сайтове от смартфон с портретна ориентация, някой с пейзаж. За първата ще ви е необходима допълнителна ориентация: портрет, за други, съответно ориентация: пейзаж. Тези редове също са обозначени в скоби след командата @media. Можете да разделите използването и. Друг интересен нюанс. Вместо това може да използвате оператора или. Той се нуждае от поне едно условие в искането! Например: @media (max-width: 500px) или (ориентация: портрет) {} Ако екранът е по-малък от 500 px ИЛИ използвайте портретна ориентация, стиловете в къдрави скоби ще започнат да работят.
ключова дума не е за по-фина настройка
В медийната заявка можете да вмъкнете думата не. Това се прави като: @media (не max-width: 700px) {} Свойствата се активират, ако максималната ширина не е 700 пиксела.
Медийни функции
В заявките могат да се използват няколко предварително дефинирани функции. Вижте всички вас на W3C. Повечето от планиращите имат достатъчно, за да притежават три основни:
ориентация (вече говорихме за това);
широчина (ширина, също спомената);
височина (височина). Височината рядко се използва, но има няколкослучаи, в които тази настройка може да бъде полезна.
Как и къде да се правят запитвания?
Много роботи по някаква причина ги поставят в самия край на стиловата таблица. Например, основните стилове са изброени първо, а след това в долната част на документа има заявки. Това не е много добре. Много по-удобно е да поставите имоти за различни устройства веднага след основните стилове. Например, имате div, който има червен цвят на шрифта: div {color: red; } Веднага след като е зададена заявката: @media (min-width: 320px) {} Пишем свойствата. Такъв подход би бил тромав, ако се използва "чист" css. Препроцесорите идват на помощ. Те имат много интересни функции за по-значими приложения. Друг вариант е поставянето на свойства за различни устройства в различни стилови файлове. Това е особено полезно, ако използвате директивата за импортиране на препроцесор. Резултатът е удобен за редактиране, чист код. Коя опция да използвате? Всичко зависи от личните предпочитания и характеристики на екипа. Може би на мястото на вашата работа ще бъде приет определен начин за поставяне на медийни заявки. Също така, не забравяйте, че можете да облекчите живота си с най-новия софтуер. Това не е само за препроцесори. С помощта на CSS Media Quotes на Gulp Group можете да направите процеса много по-удобен. Препоръчваме да овладеете този инструмент или някой от неговите аналози.
