Искания за медии CSS - описание, използване и препоръки

Заявките за медии са функция 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 и (макс-ширина: 768px)

{

заглавие {height: 70px; }

статия {font-size: 14px; }

img {макс. ширина: 480 пиксела; }

}

Горепосочената мултимедийна заявка се активира, ако прозореца на браузъра на потребителя е широк или по-малък от 768 пиксела Това може да се случи, ако съкратите прозореца на настолен компютър или използвате мобилно устройство, като таблет, за да видите уеб съдържанието.

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

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

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

• минималната ширина на устройството;
• минималната височина на устройството;
• съотношение;
• максимален цветен индекс;
• максимална разделителна способност;
• ориентацията на екрана.

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

Употреба и грешки

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

Видове медии

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

Какво представлява CSS?

CSS (Cascading Style Sheet или каскадни стилови листове) се използва за форматиране на оформлението на уеб страници, дефиниране на стилове на текста, размери на таблици и други аспекти на уеб съдържанието, които преди можеха да бъдат дефинирани само в структурата на HTML страницата.

CSS помага на уеб разработчиците да създадат един формат за няколко страници на сайта. Вместо да дефинира външния вид на всяка таблица и всеки блок от текст в HTML, стиловете се дефинират само веднъж в документа на CSS. Когато форматът е дефиниран в каскаден лист стил, той може да бъде използван от всяка страница, която препраща към CSS файл. В допълнение, CSS улеснява промяната на стилове на няколко страници едновременно. Например уеб програмист може да насрочи увеличение на размера на текста по подразбиране от 10 на 12 точки на петдесет страници на уебсайт. Ако всички страници се отнасят към един и същ стилов лист, размерът на текста ще бъде променен само в таблицата, а на всички страници той ще бъде правилният размер.

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

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

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

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

CSS Media функции

Мултимедийните функции описват специфичните характеристики на потребителския агент, изходното устройство или средата. Например, можете да приложите определени стилове към широкоекранни монитори, компютри или устройства, които се използват при условия на слабо осветление. В този пример, стиловете се прилагат, когато главният механизъм за въвеждане на потребител (например мишка) може да вися над елементи: @media (надясно: задръжте курсора на мишката) {...}.

Много мултимедийни функции са функции на диапазона, което означава, че те могат да имат префикс "мин;" или "макс;", за да изразят ограниченията за минимално или максимално състояние. Например тази команда ще прилага стилове само ако ширината на прозореца за показване на браузъра е равна или по-малка от 12.450px: @media (макс. ширина: 12450px) {...}.

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

Ако функцията не се отнася за устройството, на което работи браузърът, изразите, които съдържат тази мултимедийна функция, винаги са неверни. Например, стиловете, вложени в следната заявка, никога няма да се използват, тъй като речещото устройство няма формат на екрана: @ медия реч и (съотношение: 11/5) {...}.

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

Металните запитвания са ключов компонент на адаптивния дизайн, който ви позволява да адаптирате CSS въз основа на различни параметри или характеристики на устройството. Например мултимедийната заявка може да използва различни стилове, ако екранът е по-малък от определен размер или въз основа на това дали потребителят държи устройството в портретен или пейзажен режим.

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

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

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

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

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

Обаждане с външен стилов лист

CSS стилове за медийни заявки първо проверете типа на носителя в потребителския низ на агент, преди да продължите да проверявате физическите атрибути на прозореца за показване. Те са CSS декларация, която може да бъде извикана чрез външен стилов лист. Външното обаждане ще изглежда така: <link rel = "stylesheet" media = "и (мин-ширина: 320px) и (макс-ширина: 480px)" href = "css / yourstylesheet.css".

Директното обаждане на CSS ще изглежда така:

@media screen и (min-width: 320px)

и (макс-ширина: 480px) {

/ * Въведете стиловете си тук

}.

Медийни запитвания CSS не са модулни, което означава, че те могат да затруднят работата си. Заявката за елемент е подобна на заявка за мултимедия, защото използва CSS, когато са изпълнени определени условия. Тези данни обаче се основават на елементи, а не на браузър, които понастоящем не се поддържат в CSS3. Елементарните заявки набира скорост, особено когато те допълват заявките за CSS медии. Това означава, че и двамата могат евентуално да работят заедно, за да създадат по-модулен и гъвкав дизайн.

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

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

img {

максимална ширина: 100% -

}

Това ще намали изображението, за да съответства на размера на контейнера, който е по-малка от ширината на изображението. Задаването на максималната ширина на 100% означава, че изображението няма да се увеличи повече от неговия действителен размер.

Това обаче може да е проблем, когато става въпрос за ефективността на сайта, защото по същество доставяте изображение в пълен размер на всяко устройство. За това няма просто решение, особено ако работите върху сайт с остарели изображения. Adaptive Images обаче е plug-in, който може да оптимизира вашите изображения въз основа на размера на екрана. Адаптивният дизайн, базиран на Media Foundation Framework, ви позволява да споделяте изображения въз основа на размери на екрана.

Когато се работи с изображения, които искате да използвате SVG, уеб шрифтове, уеб-тип и CSS.