Медийни заявки
Характеристики на имота
В какви браузъри работи?
| 9.0+ | 1.0+ | 10.0+ | 4.0+ | 3,6+ | 2.0+ | 2.0+ |
Какви версии на CSS се използват?
| CSS 1 | CSS2 | CSS 2.1 | CSS 3 |
| - | - | - | + |
За какво се използва?
Както вече е известно от спецификацията на CSS, персонализиран стил може да бъде създаден за конкретен тип устройство. С пускането на спецификациите на версията CSS3 стана възможно допълнително да се коригира дизайнът в зависимост от техническите възможности на същите тези устройства. Като пример можете да изчислите устройство с максимална разделителна способност на екрана от 640 пиксела и да създадете отделен стилов лист за него, а за други устройства можете да генерирате свой собствен дизайн. Освен това можете лесно да определите индикатори като монохромен екран, ориентация на страницата по време на извеждане и други полезни характеристики. Също така си струва да се отбележи, че всички тези параметри могат да се съвместяват. По този начин можем да дефинираме уникален стил за устройство, което има определена резолюция и ориентация на страницата.
Разчитайки на всички тези предимства на CSS3, стана възможно да се създадат адаптивни ресурси, които да се показват хармонично при всякакви условия и определени индивидуални технически характеристики. Така че, когато намалявате ширината на прозореца или екрана на браузъра, можете да предефинирате броя на колоните на сайта или размера на ключовите блокове, като ги приспособите към желаните размери.
Как да попитам правилно?
Ключовата характеристика на медийна заявка е правилото @media и всички заявки трябва да започват с него. След него посочете конкретния тип устройство, за коетодекор. Това е последвано от индикация за логически оператор и медийна функция. По-долу са представени различни видове медии, чрез които може да се показва информация:
| Медия | Обяснение |
| всичко | Съвпада с всички възможни медии. Тази стойност е зададена по подразбиране |
| Брайл | Носител, работещ на брайловия принцип. Такива устройства са предназначени за хора, които не виждат. |
| релефен | Принтери, които отпечатват информация на брайлов принцип (предназначени за хора с ограничено зрение). |
| ръчен | Съвместим с PDA и подобни устройства. |
| печат | Печатащи устройства. |
| проекция | Проектор. |
| екран | Монитор. |
| реч | Устройство, което чете информация и я преобразува в гласов формат. Пример е браузърът за реч. |
| tty | Устройства, които имат стандартен размер за символи и дисплеи (например телетайп). |
| телевизия | телевизор. |
Логически оператори с примерни кодове
Съюз, който е предназначен да комбинира различни условия. Булевата му стойност е"и". Следва пример, който генерира стил за цветна медия.
Трябва да се отбележи, че този оператор няма висок приоритет на четене, така че се взема предвид от системата в последния момент.
Използването на този оператор е предназначено да оптимизира производителността на наследени браузъри, които може да не поддържат медийни заявки.
Логическите оператори изключват наличието на елемент, който в логически смисълще изпълнява функциите"или". Вместо това се използват запетаи. Тоест, при определен набор от условия стиловете ще бъдат приложени, ако поне един от тях е потвърден. Трябва също да се отбележи ролята на скобите в синтаксиса на тези оператори, те предопределят приоритета на операцията при четене на кода.
Този пример определя изгледа и усещането за устройства с пейзажна ориентация на страницата или устройства с минимална ширина на екрана от 480 пиксела.
Медийни функции
Функциите изпълняват задачата за изясняване на определени технически характеристики при извеждане на документ. Принципът на условието се основава на разчитане на истинската стойност. С други думи, ако програмираното твърдение е вярно, тогава стилът ще бъде приложен.
Въз основа на практическия опит можем да кажем, че по-голямата част от функциите работят според принципите на масиви с посочените граници. Тоест условието ще бъде при минимална или максимална стойност на даден параметър. За това се използват префиксиmin-иmax-.
съотношение (мин. съотношение, максимално съотношение)
цвят (мин. цвят, макс. цвят)
Тази функция прилага стил според цветовите възможности на устройството, а именно броя битове на канал на основния цвят. За да направя картината по-ясна, предлагам да разгледаме един прост пример. Да приемем, че зададената стойност за най-малката възможна цветова гама е числото 3. Това показва, че устройството трябва да поддържа 23 нюанса на всеки от основните цветове. След като преброим всички възможни комбинации от цветове, получаваме, че при такава стойност, за да бъде приложен дизайнът, е необходимо устройството да поддържа поне 512 цвята. По-долувиж пример
цветен индекс (мин. цветен индекс, макс. цветен индекс)
пропорция-на-устройство (съотношение-пропорция-на-устройство, пропорция-на-устройство на макс.)
Тази функция е създадена, за да определи съотношението на екрана на устройството, за което е направен дизайнът. За да направите това, просто посочете две числа, които съответстват на височината и ширината на екрана. Тези две стойности трябва да бъдат разделени с наклонена черта (/). По-долу е даден пример за устройства със съотношение 16:9 или повече
височина на устройството (мин. височина на устройство, макс. височина на устройство)
В случая говорим за точното определяне на общата височина на устройството, на което ще се зарежда информацията. Тази функция се прилага за всички цифрови медии с изключение наговорниустройства.
ширина на устройството (мин. ширина на устройство, макс. ширина на устройство)
Подобно на предишната функция, само този оператор влияе върху стойността на ширината. В същата степен тази функция се използва във всички видове устройства, с изключение на речеви браузъри и подобни устройства. Следва пример, където можете да определите ширината на страницата в зависимост от разделителната способност на екрана:
Казва на системата, че това изходно устройство разпознава само един шрифт, без да използва височината на шрифта, разстоянието между редовете или разстоянието между буквите. Такива устройства вече са рядкост в наше време, но понякога все още се срещат. Например банкови терминали. Типично за такива устройства е да използват em единици (ако все пак трябва да прибягвате до форматиране), както е показано в примера
височина (минимална височина, максимална височина)
Функцията работи много подобно на свойството на CSS за определяне на височината на елемент. В този случай се определя височината на активната зона, която улавя определена информация.Тази настройка зависи от височината на екрана на устройството и не може да надвишава тази стойност, освен ако страницата не може да бъде мащабирана.
монохромен (мин-монохромен, макс-монохромен)
Указва монохромната стойност на устройството. Това позволява на черно-белия дисплей да има по-проста цветова схема. Стойността на функцията е обичайните числа, които отчитат натоварването от битове на 1 пиксел. За по-голяма яснота, когато се посочи числото 8, ще се търси устройство, което може да разпознае 256 нюанса на желания цвят. напр.
Функцията разпознава ориентациите на страниците в устройството. Има две доста често срещани ориентации: пейзаж и портрет. В първия случай ширината на страницата ще надвишава височината, а във втория - точно обратното. По-долу е даден пример, в който фоновото изображение се променя в зависимост от зададената ориентация на устройството
разделителна способност (минимална разделителна способност, максимална разделителна способност)
Задава разрешенията на четеца, на базата на които ще се прилага зададеният външен вид. Следното показва как можете да определите външния вид за принтер, който има разделителна способност от 500 dpi работно пространство
Тази функция е само за телевизор. По този начин е възможно да се определи как информацията се чете от това устройство. Като цяло има 2 начина:
- Първият метод се нарича interlaced (interlace) - опростен начин за четене на информация, който първо показва четните редове на рамката, а след това нечетните.
- Прогресивният (прогресивен) метод работи по комплексен начин и показва пълна информация наведнъж.
ширина (мин. ширина, макс. ширина)
Показва ширината на активната област на екрана или браузъра. Често този параметър не надвишава ширината на екрана на устройството за показване. Този параметър се използва за адаптивно оформление, когато е необходимо да се коригира нормалният дизайн за устройства с различна ширина на екрана. По-долу е даден малък пример, при който промяната на ширината ще промени цвета на фона