Синтакса за медијске упите мин-видтх и мак-видтх
Одговарајући веб дизајн је приступ изградњи веб страница, где те странице могу динамички промијенити њихов изглед и изглед заснован на величини екрана посетилаца . Велики екрани могу добити распоред који одговара оним већим екранима, док мањи уређаји, као што су мобилни телефони, могу добити исти веб сајт форматиран на начин који одговара том малом екрану. Овај приступ пружа боље корисничко искуство за све кориснике и може помоћи у побољшању рангирања претраживача . Важан део одговарајућег веб дизајна је ЦСС Медиа Куериес.
Медиа Куериес су као мали условни изводи унутар ЦСС датотеке ваше веб странице, омогућавајући вам да поставите одређена ЦСС правила која ће утицати само на одређено стање - као када је величина екрана изнад или испод одређених прагова.
Медиа Куериес ин Ацтион
Па како користите Медиа Куериес на веб локацији? Ево врло једноставног примера:
- Почели би са добро структуираним ХТМЛ документом без икаквих визуелних стилова (то је оно за шта је ЦСС)
- У вашој ЦСС датотеки, почели сте како обично радите тако што ћете стајали на страници и поставити основну линију како ће изгледати веб страница. Реците да желите да величина фонта странице буде 16 пиксела, можете написати овај ЦСС: боди {фонт-сизе: 16пк; }
- Сада, можда ћете желети да повећате величину фонта за веће екране који имају довољно некретнина да то учине. Овдје се покрећу Медиа Куериес. Почели бисте Медиа Куери овако: @медиа екран и (мин-видтх: 1000пк) {}
- Ово је синтакса медијског упита. Почиње са @медиа да успоставља Медиа Куери. Затим поставите "тип медија", који је у овом случају "екран". Ово се односи на екране десктоп рачунара, таблете, телефоне и сл. Коначно, медијски упит завршите помоћу функције "медија". У нашем примеру, то је "средња ширина: 1000пк". То значи да ће медијски упит упадати на екране са ширином ширине од 1000 пиксела.
- Након ових елемената Медиа Куери-а, додате отворену и затварајућу завојну сличицу сличну оној што бисте урадили у било ком нормалном ЦСС правилу.
- Последњи корак у медијском упиту је да додате ЦСС правила која желите да примените када се тај услов испуни. Додате ова правила ЦСС-а између скривених кочница које чине Медиа Куери, као што је: @медиа екран и (мин-видтх: 1000пк) {боди {фонт-сизе: 20пк; }
- Када су испуњени услови Медиа Куери (прозор прегледача је ширине најмање 1000 пиксела), овај ЦСС стил ће ступити на снагу, мијењати величину фонта нашег сајта са 16 пиксела које смо оригинално успоставили на нашу нову вриједност од 20 пиксела.
Додавање више стилова
Можете поставити што више ЦСС правила унутар овог Медиа Куери-а колико је потребно како бисте прилагодили визуелни изглед вашег веб сајта. На пример, ако желите не само да повећате величину фонта на 20 пиксела, већ и да промените боју свих ставки у црну (# 000000), можете додати ово:
@медиа екран и (мин-видтх: 1000пк) {боди {фонт-сизе: 20пк; } п {боја: # 000000; }}Додавање додатних медијских упита
Поред тога, можете додати више Медиа Куериес за сваку већу величину, додајући их у свој стилски стил овако:
@медиа екран и (мин-видтх: 1000пк) {боди {фонт-сизе: 20пк; } п {боја: # 000000; {} @медиа екран и (мин-ширина: 1400пк) {боди {фонт-сизе: 24пк; }}Први медијски упити би се шутирали по ширини 1000 пиксела, мијењајући величину фонта на 20 пиксела. Затим, када је прегледач био изнад 1400 пиксела, величина фонта би се поново променила на 24 пиксела. Можете додати што више медијских упита по потреби за вашу одређену веб страницу.
Минимална ширина и максимална ширина
Обично постоје два начина за упис медијских упита - користећи "мин-ширину" или "мак-ширину". До сада смо видели "мин-ширину" у акцији. Ово узрокује да Медиа Куериес ступи на снагу када прегледач достигне бар минималну ширину. Дакле, упит који користи "мин-видтх: 1000пк" примењује се када је прегледач широк најмање 1000 пиксела. Овај стил Медиа Куери се користи када градите веб локацију на начин "мобилно прво".
Ако користите "максималну ширину", ради на супротан начин. Медијски упит "мак-видтх: 1000пк" би се примењивао када прегледач падне испод ове величине.
Што се тиче старијих претраживача
Један изазов са Медиа Куериес-има је недостатак подршке у старијим верзијама Интернет Екплорер-а. На срећу, постоје доступне полифилије које могу да допуне подршку за Медиа Куериес у старијим прегледачима, омогућавајући вам да их користите на веб страницама данас, док још увек осигуравате да приказивање тог сајта не изгледа сломљено у старијим софтверима претраживача.
Уредио Јереми Гирард на 1/24/17