Как пишете CSS медийна заявка?

Екран @media и (мин. ширина: 1000px) {}

Това е синтаксисът на медийна заявка. Започва с @media за установяване на самата медийна заявка. След това задайте типа носител, който в този случай е екран. Този тип се отнася за екрани на настолни компютри, таблети, телефони и др. Завършете медийната заявка с медийна функция. В нашия пример по-горе, т.е. средна ширина: 1000px. Това означава, че Media Query започва за дисплеи с минимална ширина 1000 пиксела широчина.

След тези елементи на медийната заявка, добавете отваряща и затваряща къдрава скоба, подобна на тази, която бихте направили във всяко нормално CSS правило.

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

 @media екран и (мин. ширина: 1000px) {body {размер на шрифта: 20px; }





instagram viewer

Когато условията на медийната заявка са изпълнени (прозорецът на браузъра е широк поне 1000 пиксела), този CSS стил влиза в сила, променяйки размера на шрифта на нашия сайт от 16 пиксела, които установихме първоначално, на новата ни стойност от 20 пиксели. 
 Добавяне на повече стилове 

Поставете колкото се може повече CSS правила в рамките на тази медийна заявка, ако е необходимо, за да коригирате визуалния облик на вашия уебсайт. Например, за да увеличите не само размера на шрифта до 20 пиксела, но и да промените цвета на всички абзаци на черен (# 000000), добавете това: 
@media екран и (мин. ширина: 1000px) {
тяло {
размер на шрифта: 20px;
}
п {
цвят: # 000000;
}
}
 Добавяне на още медийни заявки 

Освен това можете да добавите още медийни заявки за всеки по-голям размер, като ги вмъкнете в листа със стилове по следния начин: 
@media екран и (мин. ширина: 1000px) {
тяло {
размер на шрифта: 20px;
}
п {
цвят: # 000000;
{
}
@media екран и (мин. ширина: 1400px) {
тяло {
размер на шрифта: 24px;
}
}

Първите медийни заявки стартират с ширина 1000 пиксела, променяйки размера на шрифта на 20 пиксела. След това, след като браузърът е над 1400 пиксела, размерът на шрифта ще се промени отново на 24 пиксела. Добавете толкова медийни заявки, колкото е необходимо за вашия конкретен уебсайт. 
 Минимална ширина и максимална ширина 

Обикновено има два начина за писане на медийни заявки - чрез използване мин. ширина или с максимална ширина. Досега сме виждали минимална ширина в действие. Този подход активира медийни заявки, след като браузърът достигне поне тази минимална ширина. Така че заявка, която използва минимална ширина: 1000px се прилага, когато браузърът е широк поне 1000 пиксела. Този стил на Media Query се използва, когато създавате сайт по мобилен начин. 

Ако използвате максимална ширина, работи по обратния начин. Заявка за мултимедия от „max-width: 1000px“ се прилага, след като браузърът падне под този размер. 

Цитирайте този член.