Како пишете ЦСС медијски упит?

@медиа екран и (минимална ширина: 1000пк) {}

Ово је синтакса медијског упита. Почиње са @медиа да успостави сам медијски упит. Затим подесите тип медија, што је у овом случају екран. Овај тип се односи на екране стоних рачунара, таблете, телефоне итд. Завршите упит за медије са медијска карактеристика. У нашем примеру изнад, тј средња ширина: 1000пк. То значи да се Медиа Куери укључује за екране ширине најмање 1000 пиксела.

После ових елемената Медиа Куери-а, додајте почетну и завршну коврџаву заграду слично ономе што бисте урадили у било ком нормалном ЦСС правилу.

Последњи корак за медијски упит је додавање ЦСС правила која ће се примењивати након што се испуни овај услов. Уметните ова ЦСС правила између коврџавих заграда које чине Медија упит, овако:

 @медиа екран и (мин-ширина: 1000пк) {боди {величина-фонта: 20пк; }

Када су испуњени услови за медијски упит (прозор прегледача је широк најмање 1000 пиксела), овај ЦСС стил ступа на снагу, мењајући величину фонта на нашој веб локацији са 16 пиксела које смо првобитно успоставили на нашу нову вредност од 20 пиксела. 





instagram viewer
 Додавање више стилова 

Сместите их што више ЦСС правила у оквиру овог медијског упита по потреби за прилагођавање визуелног изгледа ваше веб странице. На пример, да бисте не само повећали величину фонта на 20 пиксела, већ и променили боју свих пасуса у црну (# 000000), додајте ово: 
@медиа екран и (минимална ширина: 1000пк) {
тело {
величина фонта: 20пк;
}
п {
боја: # 000000;
}
}
 Додавање додатних медијских упита 

Поред тога, можете додати још медијских упита за све веће величине, убацујући их у листу стилова овако: 
@медиа екран и (минимална ширина: 1000пк) {
тело {
величина фонта: 20пк;
}
п {
боја: # 000000;
{
}
@медиа екран и (минимална ширина: 1400пк) {
тело {
величина фонта: 24пк;
}
}

Први медијски упити покрећу се ширином од 1000 пиксела, мењајући величину фонта на 20 пиксела. Затим, када би прегледач био изнад 1400 пиксела, величина фонта би се поново променила на 24 пиксела. Додајте онолико медијских упита колико је потребно за вашу веб локацију. 
 Мин-ширина и макс-ширина 

Обично постоје два начина за писање медијских упита - помоћу мин-ширина или са мак-видтх. До сада смо видели мин-ширину на делу. Овај приступ активира медијске упите након што прегледач достигне најмање ту минималну ширину. Дакле, упит који користи минимална ширина: 1000пк примењује се када је прегледач широк најмање 1000 пиксела. Овај стил Медиа Куери-а користи се када веб локацију правите на мобилном уређају. 

Ако користиш мак-видтх, ради на супротан начин. Медијски упит „мак-видтх: 1000пк“ примењује се након што прегледач падне испод ове величине. 

Наведите овај чланак.