CSS Media Queries: стъпка по стъпка описание, функции и прегледи

По едно време, тези, които са посетили уебсайтове от смартфони и подобни мобилни устройства, са причинили само смях. Много просто не можаха да разберат защо това е необходимо, защото има такива удобни стационарни компютри! Или, в най-лошия случай, лаптопи. Освен това мобилният интернет беше скъп.

Минало време. Интернет беше евтин. На пазара се появиха още телефони и таблети. Някога по-късно собствениците на популярни сайтове озадачили надраскана глава. Според статистиката се оказва, че ресурсите им се посещават по-често от смартфони, отколкото от стационарни персонални компютри!

В онези дни сайтовете не бяха оптимизирани за гледане от мобилни устройства. Отивайки до стария ресурс от телефона, ще трябва да се задоволите с малки букви, малки елементи от менюто и неприятни бутони.

Появата на CSS Media Queries

Имаше нужда да се направят ресурси, така че да изглеждат добре, когато се гледат от всеки екран. Първо, практиката за създаване на отделни обекти за всеки размер се е разпространила. Например, посетител, който е използвал мобилен телефон, е имал един ресурс и този, който "седеше" от компютъра - от друга. Но беше дълъг, скъп и неудобен.

След това дойдоха CSS3 Media Queries. С тяхна помощ, една проста възможност за реализиране на динамичен дизайн.

Какво е динамичен дизайн?

Този термин се използва, ако видът на ресурса се промени в зависимост от размера на екрана, на който се гледа. Как да разберем това? Това е просто.

Представете си, че имате уеб сайт. В горната част има навигационно меню. Хоризонтална. Тя се простира по цялата ширина на страницата. Под него има блок с информация за връзка. Телефонът и адресът също са разпределени на два блока и са разположени хоризонтално, един до друг. Под този блок е основното съдържание и страничната лента се намира отляво или отдясно. По-долу, както обикновено, долен колонтитул.

Това е "класическо" оформление на компонентите. Това е чудесно за персонален компютър, но не е прекалено удобно за мобилни телефони. Хоризонталното меню е твърде широко. Контактите са далеч един от друг. За да използвате информацията от страничната лента и трябва да превъртите екрана и това не е всеки, който харесва.

Проблемът може да бъде разрешен чрез адаптивен и мобилен дизайн с CSS3 Media Queries. С помощта на медийни заявки възстановяваме местоположението на съдържанието на illip - Сега всичко работи по следния начин:

• горе - блок с вертикално навигационно меню -
• под него - блок с контакти, които сега също са разположени вертикално -
• Съдържанието на страничната лента не се показва отстрани на съдържанието на маркера
  , но го превъзмогвай.

Това е един прост пример за това, какво може да се направи с въпросите за отговорни уеб дизайн медии. В действителност, възможностите са много по-големи.

Какво е MediaQuestion?

Под термина CSS Media Queries разберете модула CSS3, с който можете да настроите съдържанието на страницата да се адаптира към определени условия. Например, тя започва да отговаря на размера на екрана или на ориентацията на устройството (портрет / пейзаж).

Как разбират системата, че трябва да промените съдържанието? За това се използват запитвания от медиите. Те определят определени параметри. Ако устройството, от което посетителят дойде на сайта, отговаря на тези параметри, са включени предварително регистрирани стилове. Те могат да бъдат написани както в общата таблица на CSS, така и в отделен файл.

CSS Media търси съвместимост с браузърите

Всички модерни браузъри поддържат тази техника от сафари до Chrome. Разбира се, потребителите на по-стари версии Internet Explorer ще има problemshellip- Но нека признаем честно - тези, които все още използват старите IE, буквално всичко може да причини проблеми.

Метални запитвания Синтаксис на адаптивното оформление

Възможно е вече да сте срещнали заявки за мултимедия, когато сте свързали стиловата листа HTML. Запомни този ред? Понякога към края бе добавен друг параметър, който изглеждаше така: media = rsquo-screenrsquo.

Това е търсенето на медиите! Това означава, че зададеният файлов стил ще работи на екранирани устройства. Вместо да екран можете да посочите печат - В този случай стиловете от файла се прилагат, ако страницата е отпечатана.

Можете да използвате следните атрибути:

• всички - универсален вариант, се използва от тишина, се използва във всички случаи -
• scrteen - екрани (компютри, лаптопи, таблети, смартфони и всичко, което е оборудвано с дисплей);
• печат - printery-
• проекция - проектори-
• реч - браузъри на речта -
• брайлов - за устройства за зрително увреждане -
• телевизия - за телевизионни екрани.

Това не е всичко. Има няколко допълнителни атрибута на CSS Media Queries, но те рядко се използват. Освен това изобщо не можете да зададете параметър - по подразбиране той ще се включи всички.

Структура на исканията за медиите

Вместо да създавате файл със стил, можете да използвате кода CSS. Това изглежда така:

@media screen и (макс-ширина: 1024px) {(тук ще има стилове}

След директивата @media, което показва, че ще бъде използвана заявката за медиите, има индикация за вида на устройството (екран - екран) и допълнителни параметри. В този пример се използва собствеността на CSS Media Queries Максимална ширина. Това означава, че стиловете, посочени в скосени скоби, ще се използват, ако размерът на екрана на потребителя не надвишава 1024пиксела. екран и и не се изискват. Можете да пишете по следния начин:

@media (макс. ширина: 1024px) {}

В този случай, свойствата ще се използват на всички устройства, а не само на тези, които са оборудвани с екран.

Определяне на множество параметри

Да предположим, че искате да ограничите обхвата на устройствата, на които ще бъдат приложени избраните стилове. Например искате да показвате свойства само на тези, които посещават сайта Ви от смартфон с размер на екрана най-малко 320пиксела, но не повече от 500пиксела. В този случай заявката има следната форма:

@media (мин-ширина: 320px) и (макс-ширина: 500px) {}

Ако сте запознати с програмирането, nj знаете за какво се използва операторът и. За тези, които не знаят: той проверява дали и двете условия са верни. Тоест, за да активирате свойства в заявка, екранът трябва да бъде най-малко 320 и не повече от 500 пиксела.

Брой оператори и не само на едно. Можете да ги поставите точно толкова, колкото искате. Например, опитайте се да създадете определени размери за екрани за смартфони и напълно различни за телевизори.

Важна точка е ориентацията на устройството на потребителя. Някой разглежда интернет страници от смартфон с портретна ориентация, някой - с пейзаж. За първи път се нуждаем от допълнително условие ориентация: портрет, за второто, съответно, ориентация: пейзаж. Тези редове също са посочени в скоби след командата @media. Можете да ги разделите и.

Друг интересен нюанс. Вместо да и можете да използвате оператора или. Той иска едно условие в искането да е истина! Например:

@media (макс. ширина: 500px) или (ориентация: портрет) {}

Ако екранът е по-малък от 500пиксела ИЛИ портретна ориентация се използва, стилове в скосени скоби ще започнат да действат.

Ключовата дума не е за по-фина настройка

Можете да вмъкнете дума в заявката за мултимедия не. Това се прави така:

@media (не макс-ширина: 700px) {}

Свойствата се активират, ако максималната ширина не е 700 пиксела.

Функции на медиите

В заявките могат да се използват няколко предварително дефинирани функции. Можете да ги видите на сайта W3C. Достатъчно е повечето машини да овладеят три основни:

• ориентация (вече говорихме за това) -
• широчина (ширина, беше споменато също) -
• височина (Височина).

Височината се използва рядко, но има няколко случая, при които тази настройка може да е полезна.

Как и къде да подадете заявки?

Много оформления по някаква причина ги поставят в самия край на стилове. Например, първо са изброени основните стилове и след това в долната част на документа има запитвания.

Това не е много добро. Много по-удобно е да поставите свойства за различни устройства веднага след основните стилове. Например, имате div, който има червен цвят на шрифта:

div {

цвят: червено-

}

Веднага след като посочи заявката:

@media (мин-ширина: 320px) {}

Предписване на свойства.

Този подход ще бъде тромав, ако използвате "чист" CSS. Преработвателите идват на помощ. Те имат много интересни възможности за по-точно прилагане на заявките.

Друга възможност е да се поставят свойства за различни устройства в различни стилови файлове. Това е особено полезно, ако използвате директивата за импортиране на предпроцесори. Резултатът е чист, чист код.

Коя опция да използвате? Всичко зависи от личните предпочитания и особеностите на работата на екипа. Може би вместо вашата работа ще бъде приет определен метод за поставяне на медийни запитвания.

Също така не забравяйте, че можете да опростите живота си с помощта на най-новия софтуер. Не става дума само за препроцесори. С помощта на Gulp Group CSS Media Queries можете да направите процеса много по-удобен. Препоръчваме да овладеете този инструмент или някои от неговите аналози.