Медийните заявки са CSS функция, която позволява на съдържанието на уеб страниците да се адаптира към различни размери на екрана и разрешения. Те са неразделна част от гъвкавия уеб дизайн и се използват за персонализиране на външния вид на уебсайтове за множество устройства с различни размери на екрана. Да, Media Queries е CSS3 модул, който ви позволява да конвертирате съдържание в условия, като разделителна способност на екрана на смартфон или компютър. Станете препоръчителният W3C стандарт през юни 2012 г. и днес се използва активно в уеб дизайна и графичния дизайн.


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

История

Медийните заявки за първи път бяха идентифицирани в първоначалното изречение на CSS Hocon Wium Lie през 1994 г., но по това време те не станаха част от CSS1. HTML4 препоръката от 1997 г. дава пример за това как тези компоненти могат да бъдат добавени в бъдеще. През 2000 г. W3C започна работа с Media Queries. Първият проект за обществени поръчки за медийни запитвания беше публикуван през 2001 г. Спецификацията стана препоръка W3C през 2012 г. след товабраузърите са добавили поддръжка.

Как се пишат в CSS медийните запитвания?

Заявките могат да бъдат вмъкнати в HTML файл на уеб страница или да бъдат включени в отделен .CSS файл, за който се отнася. По-долу е дадено описание и пример за медийни заявки в CSS: @media screen и (max-width: 768px) {header {height: 70px;} article {font-size: 14px;} img {макс-ширина: 480px;}} Заявка за мултимедийно по-горе се активира, ако прозорецът на потребителя на браузъра е 768 пиксела широк или по-малък. Това може да се случи, ако отрежете прозореца си на настолен компютър или използвате мобилно устройство, например таблет, за да видите уеб съдържание.

Как да се използват CSS3 медийни запитвания?

В подходящия уеб дизайн медийните заявки действат като филтри за различни размери на екрана. Подобно на всички модули в каскадния стил, тези, които се появяват по-нататък в списъка, предопределят тези, които са над тях. Затова стиловете по подразбиране обикновено се определят първоначално в CSS документ, последвано от заявки за мултимедия за различни размери на екрана. Например, първо можете да дефинирате стилове на работния плот, а след това и мултимедийно запитване със стилове за потребители на таблети, а след това и за потребители на смартфони. Стиловете могат да бъдат дефинирани и в обратен ред. Докато минималната ширина е най-често използваната функция в медийните заявки, много други също са широко достъпни. Размерите на изображение в CSS медийните заявки включват:

минималната ширина на устройството;

минималната височина на устройството;

аспектно съотношение;

максимален цветови индекс;

максимумрезолюция;

ориентация на екрана.

Например стойността на разделителната способност може да се използва за откриване на дисплеи на HiDPI (например изображения на ретината) и изтегляне на графики с висока резолюция вместо стандартни изображения.

Използване и грешки

Защо не работят CSS медийни заявки? Този компонент се състои от тип носител и един или повече изрази, които използват мултимедийни функции, които връщат или true или false. Резултатът от заявката е вярно, ако типът на носителя, посочен в него, съвпада с типа на устройството, в което се показва документът, и всички изрази в мултимедийната заявка са верни. В случаите, когато CSS медийните заявки не работят, трябва да проверите подходящите правила за стилни и каскадни правила. Тези данни могат да съдържат грешка.

Типове медии

Типът медия може да бъде деклариран в заглавната част на HTML документа, като се използва атрибутът "media" в елемента. Стойността на мултимедийния атрибут показва кое устройство ще покаже свързания документ. Видовете носители могат също да бъдат декларирани в инструкциите за обработка на XML, @import at-rule и @media at-rule. Мултимедийният тип "всички" може също да се използва, за да укаже, че стиловата таблица се прилага за всички типове носители.

Какво е CSS?

CSS (Cascading Style Sheet или Cascading Style Sheets) се използва за форматиране на оформлението на уеб страницата, дефиниране на текстови стилове, размери на таблици и други аспекти на уеб съдържание, които преди това можеха да бъдат дефинирани само в структурата на HTML страниците. CSS помага на уеб разработчиците да създават единен формат за множествостраници на сайта. Вместо да дефинират типа на всяка таблица и всеки блок от текст в HTML стила, те се определят само веднъж в CSS документа. Когато форматът е указан в каскадния стилов лист, той може да се използва от всяка страница, която се свързва към CSS файл. В допълнение, CSS улеснява промяната на стиловете на няколко страници наведнъж. Например, уеб разработчик може да планира увеличение на размера на текста по подразбиране от 10 на 12 pt на петдесет страници на уебсайт. Ако всички страници се отнасят към един и същи стилов лист, размерът на текста ще бъде достатъчно променен само в таблицата, а на всички страници ще се появи необходимия размер.
Въпреки че CSS е чудесно средство за създаване на текстови стилове, то е полезно и за форматиране на други аспекти на оформлението на уеб страници. Например, CSS може да се използва за определяне на запълването на клетки на таблицата, стил, дебелина и цвят на границата, както и за запълване на елементи от изображението или други обекти. CSS, в сравнение с HTML, дава на уеб разработчиците по-прецизен контрол върху начина, по който изглеждат уеб страниците.

Видове мултимедийни запитвания

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

CSS медийни функции

Мултимедийните характеристики описват специфичните характеристики на потребителски агент, изходно устройство или среда. Например, можете да приложите някои стилове към широкоекранни монитори, компютри или устройства, които се използват в условия на слаба светлина. В този пример се използват стилове, при които основният потребителски механизъм за въвеждане (например, мишката) може да виси над елементите: @media (hover: hover) {}. Много мултимедийни функции са функции за честотна лента, което означава, че те могат да имат префикс "min" или "max-" за изразяване на минимални или максимални ограничения. Например, тази команда ще приложи стилове само ако ширината на екрана на браузъра е равна или по-малка от 12450 px: @media (max-width: 12450px) {}. Ако създадете заявка за мултимедийни функции, без да зададете стойност, ще се използват вложени стилове, докато стойността на функцията е нула. Например, този CSS ще се прилага за всяко устройство с цветен екран: @media (цвят) {}. Ако функцията не се отнася за устройството, на което работи браузърът, изразите, които съдържат тази мултимедийна функция, винаги са погрешни. Например стиловете, прикрепени към следната заявка, никога няма да се използват, тъй като нито едно речево устройство няма формат на екрана: @media speech и (съотношение: 11/5) {}.

Техническа спецификация

Медийните заявки са ключов компонент на адаптивния дизайн, който ви позволява да адаптирате CSS въз основа на различни параметри илихарактеристики на устройството. Например, една мултимедийна заявка може да приложи различни стилове, ако екранът е по-малък от определен размер, или въз основа на това дали потребителят поддържа устройството си в портретен или пейзажен режим. Синтаксисът на мултимедийните заявки също се използва в други контексти, например в медийния атрибут на елемент, който може да бъде конфигуриран в мултимедийния низ за запитване, за да се използва за определяне дали да се използва този източник при избора на конкретно изображение за използване в елемент. Методът Window.matchMedia () може да се използва за проверка на прозореца на заявка за мултимедия. Можете също да приложите функцията MediaQueryList.addListener (), за да предупреждавате при промяна на състоянието на заявките. С тази функция вашият сайт или приложение може да отговори на конфигурацията на устройството, ориентацията или промените в състоянието.

Мултимедийни заявки за стилове на стил

Адаптивният уеб дизайн е срещнал бавно изтегляне на съдържание. Сега процесът за премахване на този недостатък е добре документиран. Има няколко начина, по които разработчиците го използват за по-добро изтегляне на съдържание и изображения на различни устройства. Един от тях е използването на медийни заявки, които работят, за да извикат стиловете на интерфейса на устройството въз основа на неговия размер. В миналото програмистите твърдят, че медийните заявки са най-доброто решение за мобилни устройства и тези дебати все още продължават. Сега официално е признато, че CSS медийните заявки (медийни заявки) са прост и ефективен начин за показване на различно съдържание за няколко устройства иНай-често използваните заявки са тези, които се отнасят до височината и ширината на екрана.

Извикване с използване на външна таблица със стилове

CSS стиловете за медийни заявки първо проверяват типа на носителя за реда на потребителския агент, преди да продължат да проверяват физическите атрибути на прозореца за изглед. Те са CSS реклама, която може да бъде извикана с помощта на външния стилов лист. Външното повикване ще изглежда така: Простият CSS разговор ще изглежда така: @media екран и (min-width: 320px) и (max-width: 480px) {/* Вмъкнете стила си тук}. CSS медийните заявки не са модулни и следователно могат да усложнят работата им. Искането за елемент е подобно на заявка за показване, защото използва CSS при определени условия. Тези типове данни обаче се базират на елементи, а не на браузъра, които в момента не се поддържат в CSS3. Елементалните запитвания набират скорост, особено след като допълват CSS медийните запитвания. Това означава, че и двете могат да работят заедно, за да създадат модулни и гъвкави конструкции.

Работа с изображения

Мащабиране на изображения за гъвкав дизайн е доста прост процес. Има обаче няколко въпроса, които трябва да бъдат разгледани. Това е загубата на компоненти за компресиране и изображения за поставяне на съдържание на по-малки устройства. За да създадете мащабируеми изображения, просто добавете следния код в таблицата със стилове: img {max-width: 100%; } Това ще намали изображението, за да съответства на размера на контейнера, който е по-малък от ширината на изображението. растениеМаксималната ширина от 100% означава, че изображението няма да се увеличи повече от действителния размер. Това обаче може да е проблем, когато става въпрос за ефективността на сайта, защото по същество доставяте изображение в пълен размер за всяко устройство. Няма лесно решение за това, особено ако работите на сайт с остарели изображения. Adaptive Images обаче е приставка, която може да оптимизира вашите изображения въз основа на размери на екрана. Адаптивният дизайн, базиран на Media Foundation Foundation Foundation, също ви позволява да споделяте изображения въз основа на размери на екрана. Когато работите с изображения, трябва да използвате SVG, уеб шрифтове, уеб тип и CSS.