Синтаксата за медиумските пребарувања на мин-ширина и макс-ширина
Отворени веб дизајн е пристап кон градење на веб-страници, каде што овие страници динамично можат да го сменат нивниот изглед и изглед врз основа на големината на посетителот . Големите екрани можат да добијат распоред што одговара на оние поголеми прикази, додека помалите уреди, како што се мобилни телефони, можат да го примат истиот веб-сајт форматиран на начин што е погоден за тој помал екран. Овој пристап обезбедува подобро корисничко искуство за сите корисници и може дури и да помогне за подобрување на рангот на пребарувачот . Важен дел од одговорен веб дизајн е CSS Media Queries.
Медиумските пребарувања се како мали условни изјави во CSS-датотеката на вашиот веб-сајт, овозможувајќи ви да поставите одредени CSS правила кои ќе влијаат само кога одредена состојба е исполнета - како кога големината на екранот е над или под одредени прагови.
Медиумски пребарувања во акција
Па, како користите медиа пребарувања на веб-страница? Еве еден многу едноставен пример:
- Ќе започнете со добро структуриран HTML документ без никакви визуелни стилови (тоа е она за што е CSS)
- Во вашата CSS-датотека, ќе започнете како што обично го правите со ставање на страницата и поставување на основно ниво за тоа како ќе изгледа веб-страницата. Кажете дека сакате големината на фонтот на страницата да биде 16 пиксели, можете да го напишете овој CSS: body {font-size: 16px; }
- Сега, можеби ќе сакате да ја зголемите таа големина на фонт за поголеми екрани кои имаат доволно недвижен имот за да го направат тоа. Ова е местото каде што се влегуваат медиумските пребарувања. Ќе започнете медиумско пребарување како ова: @media екран и (мин-ширина: 1000px) {}
- Ова е синтаксата на медиумското барање. Започнува со @media за да го воспостави Медиумското барање. Потоа го поставите "типот на медиум", кој во овој случај е "екран". Ова важи за десктоп компјутерските екрани, таблети, телефони и сл. Конечно, го прекинувате Media Query со "медиумска карактеристика". Во нашиот пример погоре, тоа е "средна ширина: 1000px". Ова значи дека медиумското барање ќе започне со прикажување со ширина ширина од 1000 пиксели.
- По овие елементи од Media Query, ќе додадете отворен и затворен кадрава заграда слична на она што вие би го направиле во било кое нормално CSS правило.
- Последниот чекор до медиумското барање е да додадете правила на CSS што сакате да ги примените откако ќе се исполни оваа состојба. Вие додавате овие правила на CSS помеѓу кадравите загради што го сочинуваат медиумското барање, како што е: @media и (мин-ширина: 1000px) {body {font-size: 20px; }
- Кога условите за медиумското барање се исполнети (прозорецот на прелистувачот е широк најмалку 1000 пиксели), овој стил на CSS ќе стапи на сила со промена на големината на фонтот на нашата страница од 16 пиксели што ние првично ги утврдивме на нашата нова вредност од 20 пиксели.
Додавање на повеќе стилови
Можете да поставите што повеќе CSS правила во ова Медиумско барање, доколку е потребно за да го прилагодите визуелниот изглед на вашиот веб-сајт. На пример, ако сакавте не само да ја зголемите големината на фонтот на 20 пиксели, туку и да ја смените бојата на сите ставови во црно (# 000000), можете да го додадете ова:
@media екран и (мин-ширина: 1000px) {body {font-size: 20px; } p {боја: # 000000; }}Додавање на повеќе медиумски пребарувања
Дополнително, можете да додадете повеќе медиумски пребарувања за секоја поголема големина, додавајќи ги во вашиот стилски лист како што е:
@media екран и (мин-ширина: 1000px) {body {font-size: 20px; } p {боја: # 000000; {} @media екран и (мин-ширина: 1400px) {body {font-size: 24px; }}Првите медиумски пребарувања ќе започнат со ширина од 1000 пиксели, менувајќи ја големината на фонтот на 20 пиксели. Потоа, откако прелистувачот беше над 1400 пиксели, големината на фонтот повторно ќе се промени на 24 пиксели. Можете да додадете што повеќе медиумски пребарувања колку што е потребно за вашиот конкретен веб-сајт.
Мин Ширина и Макс Ширина
Обично постојат два начини да се пишуваат медиумски пребарувања - со користење на "мин-ширина" или со "макс-ширина". Досега видовме "мин-ширина" во акција. Ова предизвикува медиумските пребарувања да стапат на сила откако прелистувачот ќе ја достигне барем таа минимална ширина. Значи, прашањето што користи "мин-ширина: 1000px" ќе се применува кога прелистувачот е широк најмалку 1000 пиксели. Овој стил на Media Query се користи кога градите сайт на начин "мобилен-прв".
Ако користите "макс-ширина", таа работи на спротивен начин. Медиумското барање за "макс-ширина: 1000px" ќе се применува откако прелистувачот ќе падне под оваа големина.
Во врска со постарите прелистувачи
Еден предизвик со Media Queries е нивниот недостаток на поддршка во постарите верзии на Internet Explorer. За среќа, постојат достапни полифили кои можат да ја задржат поддршката за медиумските пребарувања во постарите прелистувачи, овозможувајќи ви да ги користите на веб-сајтови денес, додека сеуште се грижите дека приказот на тоа место не изгледа скршен кај постариот софтвер за прелистувач.
Уредено од Џереми Жирар на 1/24/17