Как да вмъкнете заявки за медии? CSS - адаптивност в три стъпки

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

Метални запитвания в CSS: 5 минути адаптивни

С прости думи медийната заявка е дизайн, който ви позволява, в зависимост от определени условия, да изберете кои стилове да използвате на страницата. Например, ако ширината на прозореца на браузъра над 1024 пиксела, да покаже пълно меню, се простират на цялата ширина на страницата, и ако по-малко от 1024 - я скриете (например, с помощта на дисплея на имущество: няма;) и да се покаже, вместо на "бургер меню", когато се натисне на който се показва елегантен списък (дисплей: блок-)

Така че най-простата заявка за CSS за медиите ще изглежда така:

.меню {display: block-}
.burger-menu { дисплей: няма; }

@media all и (макс-ширина: 1024px) {

.меню { дисплей: няма; }
.меню за бургери {display: block-}

}

Буквално, можете да прочетете това: винаги показваме основното меню и да скриете "бургер меню", но ако прозореца на браузъра е по-малка от 1024 пиксела (макс ширина: 1024 на средства "до максимална ширина от 1024"), а след това се крият старите менюта и шоу ново. Свойствата в заявката за мултимедия ще бъдат презаписани от съществуващите. Тя ще работи както когато отворите страницата, от мобилен телефон или таблет, а с постепенно намаляване на прозореца на браузъра, когато ние го превърне в кутията и хвана една от страните и издърпайте чрез намаляване на размера му.

Приблизително така, че заявката може да изглежда във вашия редактор:

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

Поддръжка за медийни заявки

Може би този въпрос е от ключово значение за тези, които сериозно мислят за посетителите на сайта си и се стремят да го направят възможно най-достъпен за всички. За щастие, медийни запитвания са запазени много добре и работят добре в модерни браузъри, като се започне с най-проблематични Safari 4 и Internet Explorer 9. Ако наистина трябва да се подкрепят Internet Explorer 8, можете да се свържете с популярната страница или скрипт respond.js CSS3-mediaqueries. JS.

Инсталиране на правилния CSS за мобилни устройства

За да може всичко да работи както трябва, е важно да не забравяте да го поставите в заглавката етикет за изглед на документ. Това се прави, както следва:

По този начин, на екраните на мобилни устройства с висока плътност на пикселите ще бъде зададено правилното съотношение между зададените в CSS и действителния брой пиксели и сайтът Ви ще бъде мащабиран. И вече няма въпрос, защо медиите не работят с пълзянето на CSS.

Елегантна адаптивност

Основната задача на медийните запитвания е да направят сайта адаптивен, т.е. да го "преподава" автоматично, за да се адаптира към всички формати и размери на екрана. Това може да се направи по два начина.

Да се ​​обозначават исканията за CSS на медиите като някои ключови точки, които най-често се отнасят до популярните формати на устройства. Например, най-простата версия: 320px - телефони, 768px - таблети, 1024px и повече - лаптопи и персонални компютри. И във всяка от тези точки променете фиксираните размери на блоковете (както и всички други обекти, като видео или изображения).

Вторият начин е да направите гладък, "гумен" преход между няколко точки, като укажете елементите на страницата да не са твърди размери в пиксели, а в проценти. В този случай, например, в менюто горе и 1024 единица ще заемат 50% от страницата плавно намалява, заедно с размера на прозореца на браузъра, за да 768px, а след това - протегна до 100% от илюминатора.

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

Трикът на капитана: укажете медиите css - правила в връзката за маркери!

Малко знае, но не е необходимо да пишете заявки директно в CSS стилове, можете да ги посочите директно, когато свържете файла директно в маркера . Файлът ще бъде свързан в зависимост от това дали страницата отговаря на критериите, посочени в собствеността на медията. По същия начин можете да го използвате, когато импортирате стилове от други файлове, като използвате @import.

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