Медийните заявки бяха въведени в спецификацията на CSS3 чрез решаване на старото главоболие на всички уеб разработчици: собствено CSS стил за управление, в зависимост от техническите характеристики на конкретно устройство, и плавна промяна на стилове при промяна на размера на прозореца на браузъра.
CSS Media Answers: Адаптивно за 5 минути
С прости думи, медийната заявка е дизайн, който ви позволява да избирате кои стилове да се използват на дадена страница, в зависимост от определени условия. Например, ако ширината на прозореца на браузъра е по-голяма от 1024px, показваме пълно меню, което се простира по цялата ширина на страницата, а ако е по-малко от 1024px - го скриваме (например, използвайки дисплея: none; свойство) и вместо това показваме бутон „burger menu“ който разкрива сложен списък (дисплей: блок;)
Така че най-лесната медийна CSS заявка ще изглежда така: .menu {display: block;}
.burger-меню {display: none;} @ всички носители и (max-width: 1024px) {.menu {display: none;} .burger-меню {display: block;}} Verbatim можете да прочетете следното: винаги показвай стандартното меню и скрий "менюто от бургер", но ако ширината на прозореца на браузъра е по-малка от 1024 пиксела (max-width: 1024px означава "до максимална ширина 1024px"), тогава скриваме старото меню и показваме ново. Свойствата на медийните заявки ще бъдат валидни. Това ще работи както когато отваряте страница от мобилния си телефон или таблет, и ако бавно намалите прозореца на браузъра, ако го превърнем в прозореца, притискайки една от страните и го издърпайте надолу, намалявайки неговия размер.
Подобно искане може да изглеждав редактора:
Ако имате кратък преглед на медийните заявки в CSS, можете спокойно да практикувате и тествате техните резултати на собствения си сайт, като инсталирате CSS медийни заявки на него. Мобилните устройства също така лесно ще разпознават новите ви стилове, освен ако не забравите да посочите мета маркер на екрана, който ще обсъдим по-подробно по-долу. Препоръчваме ви обаче да прочетете повече за техните свойства, да научите повече за поддръжката на браузъра, да помислите първо за мобилния и на работния плот.
Подкрепа за медийни запитвания
Може би този въпрос е от ключово значение за тези, които сериозно мислят за посетителите на сайта си и се стремят да го направят възможно най-широко достъпен за всички. За щастие, медийните заявки вече са добре поддържани и работят добре в съвременните браузъри, като се започне от най-проблемния Safari 4 и Internet Explorer 9. Ако трябва да архивирате Internet Explorer 8, можете да се свържете със скрипта на популярния answer.js или css3-mediaqueries.js. ,
Инсталираме правилните CSS медии за мобилни устройства
. За да работи всичко, когато е необходимо, е важно да не забравите да зададете етикет на viewport в заглавието на документа. Това се прави по следния начин: Така, на мобилни устройства с висока плътност на пикселите, правилната връзка между зададената CSS и действителния брой пиксели ще бъде настроена и сайтът ви ще бъде мащабиран. И вече няма въпрос защо медиите не работят, когато CSS е намален.
Фина адаптивност
Основната задача на медийните запитвания е да направят сайта адаптивен, т.е. да го "научат" да се адаптира автоматично къмвсички формати и размери на екрана. Можете да направите това по два начина. Маркирайте медийните CSS заявки с някои ключови точки, които най-често се отнасят до популярните формати на устройства. Например, най-лесният вариант е: 320px - телефони, 768px - таблети, 1024px и повече - лаптопи и персонални компютри. И на всяка от тези точки променяте фиксирания размер на блоковете (както и всички други обекти като видео или изображение). Вторият начин е да се направи плавен, "гумен" преход между няколко точки, поставяйки елементите на страницата не твърди размери в пиксели, а процентите. В този случай, например при 1024px и повече, лентата с менюта ще заема 50% от страницата, плавно с размера на прозореца на браузъра до 768px, а след това - до 100% от прозореца на браузъра.
Заслужава да се спомене и първият мобилен и десктоп първи, различаващи се в подхода за изграждане на заявки. В първия случай първо описваме правилата за всички устройства, включително лаптопи, персонални компютри, и след това постепенно изграждаме сайта и премахваме допълнителните елементи на страницата. Във втория - първо подготвяме оформлението на сайта за мобилни устройства, а след това при разширяване на прозореца на браузъра и появата на свободно пространство поставяме съдържание в тях.
Трик от съветника: точкова медия css - правила в връзката с етикета!
Малко хора знаят, но не е задължително да пишат заявки директно в CSS стилове, можете да ги посочите директно, когато свързвате файла, директно в етикета. Файлът ще бъде свързан в зависимост от това дали страницата отговаря на критериите, посочени в свойствотомедии. Можете да използвате същия начин при импортиране на стилове от други файлове с помощта на @import. В заключение, трябва да се отбележи, че много популярни библиотеки, използвани в разработването на сайтове, които съдържат вградени аналози на медийни запитвания. Те не трябва да бъдат пренебрегвани. Например Bootstrap ви позволява да се абонирате за класове от клас HTML, благодарение на които блоковете автоматично ще се адаптират, когато преоразмерявате екрана, но няма да можете да управлявате този процес гъвкаво и сайтът винаги ще бъде строго разделен на 12 колони. В крайна сметка, само с тяхна помощ можете да създадете сайт, който ще бъде възможно най-гъвкав, за да се адаптира към всякакви устройства, като същевременно е напълно под ваш контрол.
