Използване на CSS3 медийни заявки за адаптивно оформление на шаблон
Здравейте скъпи приятели и гости на моя блог. В днешната статия нека поговорим за CSS3 медийните заявки и как те създават адаптивни шаблони за сайтове.
Защо са необходими медийни заявки и как работят
Разбира се, знаете, че всеки сайт се състои от HTML рамка и CSS стилове. Всичко останало, бази данни, скриптове и други джаджи, са необходими в зависимост от сложността на проекта.
Но в тази форма на екрана на монитора ще се покаже бял екран. Тъй като няма блоково съдържание и най-важното - CSS стил.
Когато се зададат стиловете на дизайн, страницата на сайта придобива познатия ни вид. Където изображенията са на местата си, размерът и цветът на шрифта отговарят на цялостната концепция и т.н.
Това се дължи на факта, че първоначално стиловете са написани за стандартни монитори, кой би си помислил, че модерните джаджи ще превземат света толкова бързо. И тогава търсачките възприеха адаптивния дизайн като фактор за класиране. Добре де, някаква засада.
И тук идват медийните запитвания. Което, между другото, стана достъпно с появата на новата версия на CSS3.
И така, как работят? И те работят по следния начин, ако някога ви се е налагало да пишете формули в Excel или програма, тогава сте запознати с условието „ако“. Тоест медийната заявка създава следните условия: "ако екранът на браузъра или устройството е по-малък от 600px, тогава приложете следните стилове."
И изглежда така:
Ако прилагате заявки само за малки джаджи, тогава заявката ще изглежда така:
Това са толкова прости условия, но работят много ефективно. Но това е само един пример, когато поставяме условие за ширината на екрана. И такива условиядоста, където можете да създадете условия както за височина, така и за ориентация и много други. Можете да намерите пълния списък с медийни заявки тук.
И сега нека да разберем къде да регистрираме връзката на медийните заявки.
Как да включите медийни заявки
Всъщност тук всичко е много просто. Можете да добавяте заявки към листа със стилове на вашия сайт (style.css) или да създадете нов мобилен лист със стилове и да го включите като отделен лист със стилове.
Като начало нека анализираме първата опция - добавяне на медийни заявки към листа със стилове. Заявката трябва да се намира след всички основни стилове, тоест най-отдолу на файлаstyle.css.
Медийни заявки в стилов лист
Така първоначално ще се изпълняват основните стилове и ако условията са изпълнени, ще се прилагат стиловете, посочени в заявката.
Сега помислете за втория вариант, по-сложен. Е, не е сложно от гледна точка на добавяне на заявки, а от гледна точка на създаване на по-големи стилове. Например, ако сега искам да направя своя блог шаблон адаптивен, тогава ще трябва да използвам този конкретен метод. Създайте отделен файл с куп заявки и го свържете към вашия блог. За щастие реших да променя шаблона и не трябва да правя това.
Нека преминем през процеса на добавяне на медийни заявки по този начин.
Създайте файл с медийни заявки
След това трябва да копирате този файл в хостинга във вашата папка с теми или в папката, където се съхранява файлът style.css.
Копиране на файл на хостинг
И в края на процедурата трябва да включите стилов лист за мобилни устройства. За да направите това, отворете заглавния файл (header.php), потърсете къде са свързани основните стилове и по-долу добавете връзката за мобилни стилове.
Този код говори заче тези стилове ще се задействат, ако екранът на устройството е по-малък от 600px.
Това по принцип са всички трикове с медийните заявки. Както гласи правилото на Парето, 20% усилия гарантират 80% успех. Тоест знанията, получени в статията, гарантират 80% успешно приложение на практика. Останалото зависи от познанията по HTML и CSS.
О, да, исках също да ви разкажа за инструментите, които ще ви помогнат при разработването на адаптивно оформление на уебсайт.
Как да видите изгледа на сайта от мобилни устройства на компютър
За да направите това, просто щракнете с десния бутон върху страницата на сайта и изберете „Преглед на кода на елемента“ за Chrome и Yandex или „Изследване на елемента“ за Firefox.
Преглед на адаптивно оформление в Yandex
Вижте Responsive Layout във Firefox