Синтаксисът за заявки за медии с минимална ширина и максимална ширина
Отзивчивият уеб дизайн е подход към изграждането на уеб страници, където тези страници могат динамично да променят оформлението и вида си въз основа на размера на екрана на посетителя . Големите екрани могат да получат оформление, подходящо за тези по-големи дисплеи, докато по-малки устройства, като мобилни телефони, могат да получават един и същ уебсайт, форматиран по начин, който е подходящ за този по-малък екран. Този подход осигурява по-добра практическа работа на потребителите за всички потребители и дори може да помогне за подобряване на класирането в търсачките . Важна част от отзивчивия уеб дизайн е CSS Media Queries.
Металните запитвания са като малки условни твърдения в CSS файла на уебсайта Ви, което ви позволява да зададете определени правила на CSS, които ще се отразят само след като определено условие е изпълнено - например когато размерът на екрана е над или под определени прагове.
Медийни запитвания в действие
И така, как използвате Media Queries на уебсайт? Ето един много прост пример:
- Вие ще започнете с добре структуриран HTML документ, свободен от всякакви визуални стилове (това е, което CSS е за)
- Във вашия CSS файл ще започнете както обикновено, като оформите страницата и зададете базова линия за това как ще изглежда сайтът. Кажете, че искате размерът на шрифта на страницата да бъде 16 пиксела, можете да напишете този CSS: body {font-size: 16px; }
- Сега, може да искате да увеличите този размер на шрифта за по-големи екрани, които имат достатъчно недвижими имоти да го направят. Това е мястото, където Media Queries ритник инча Можете да започнете Media Query като това: @ медия екран и (мин-ширина: 1000px) {}
- Това е синтаксиса на Media Query. Започва с @media, за да установи самата медийна заявка. След това зададете "тип носител", който в този случай е "екран". Това важи за екрани за настолни компютри, таблети, телефони и др. Накрая приключвате Media Query с "мултимедийна функция". В нашия пример по-горе, това е "mid-width: 1000px". Това означава, че Media Query ще се задейства за дисплеи с минимална ширина от 1000 пиксела.
- След тези елементи на медийното запитване добавете начална и затваряща къдрава скоба, подобна на тази, която бихте направили при всяко нормално правило за CSS.
- Последната стъпка към Media Query е да добавите правилата на CSS, които искате да приложите, след като това условие е изпълнено. Добавяте тези правила за CSS между къдравите скоби, които съставят Media Query, като например: @media screen и (min-width: 1000px) {body {font-size: 20px; }
- Когато условията на медийното запитване са изпълнени (прозорецът на браузъра е с широчина поне 1000 пиксела), този стил на CSS ще влезе в сила, променяйки размера на шрифта на нашия сайт от 16-те пиксела, които първоначално създадохме до нашата нова стойност от 20 пиксела.
Добавяне на повече стилове
Можете да поставите колкото се може повече правила на CSS в този медиен въпрос, колкото е необходимо, за да коригирате визуалния ви вид на уебсайта си. Например, ако искате не само да увеличите размера на шрифта до 20 пиксела, но и да промените цвета на всички параграфи в черно (# 000000), можете да добавите следното:
@media screen и (мин-ширина: 1000px) {body {font-size: 20px; } p {цвят: # 000000; }}Добавяне на повече медийни заявки
Освен това можете да добавите още медийни заявки за всеки по-голям размер, като ги добавите към стиловия лист така:
@media screen и (мин-ширина: 1000px) {body {font-size: 20px; } p {цвят: # 000000; {} екран @media и (мин-ширина: 1400px) {body {font-size: 24px; }}Първите медийни заявки биха удряли на 1000 пиксела, като променят размера на шрифта до 20 пиксела. След това, след като браузърът е над 1400 пиксела, размерът на шрифта отново ще се промени на 24 пиксела. Можете да добавите толкова медийни заявки, колкото е необходимо за конкретния Ви уебсайт.
Мин-широчина и максимална ширина
Обикновено съществуват два начина за писане на заявки за медии - като използвате "min-width" или "max-width". Досега сме виждали "минимална ширина" в действие. Това кара медийните заявки да влязат в сила, след като браузърът е достигнал поне тази минимална ширина. Затова заявката, която използва "мин-ширина: 1000px", ще бъде приложена, когато браузърът е с широчина поне 1000 пиксела. Този стил на медийното запитване се използва, когато изграждате сайт по начин "мобилен първо".
Ако използвате "максимална ширина", тя работи в обратна посока. Ще се приложи заявка за "максимална ширина: 1000px", след като браузърът падне под този размер.
По отношение на по-старите браузъри
Едно предизвикателство с Media Queries е тяхната липса на подкрепа в по-старите версии на Internet Explorer. За щастие има налични polyfills, които могат да обменят поддръжка за Media Queries в тези по-стари браузъри, което ви позволява да ги използвате на уеб сайтове днес, като същевременно се уверите, че показването на този сайт не изглежда счупено в по-стария софтуер на браузъра.
Редактиран от Джереми Жирард на 24.1.17