5 корисних савета за креирање прилагодљивих распореда

Замислите да сте урадили сав напоран посао да направите заиста кул изглед. Али онда, када само мало смањите прозор прегледача, наћи ћете нешто што је преплављено. Убаците медијски упит да бисте решили проблем. Али када промените величину прозора, приметићете да се нешто друго покварило.

Ово је нешто што ће већина ЦСС програмера искусити у једном тренутку. Али, срећом, имамо неколико модерних ЦСС решења која умногоме олакшавају само развијање ствари и њихово добро функционисање. Овај чланак истражује 5 корисних пракси које треба имати на уму приликом развоја веб локација. Ови савети ће вам помоћи да избегнете досадне паузе у дизајну.

1. Започните са глобалном таблицом стилова

Увек почните са глобалним стиловима када пишете ЦСС. Не брините о распореду. Уместо тога, поставите генеричке стилове као што су типографија, боје и позадине. Ресетујте маргине, уклоните подвлаке са веза итд.

Након што завршите са општим стилом, можете почети да креирате изглед и циљате појединачне елементе унутар изгледа. У суштини, почните од врха, а затим пређите на елементе.

Следећи ЦСС пример ресетује маргину на свим елементима на 0, дефинише типографију и боју свих главних наслова и додаје доследну маргину свима њима:

тело,
х1,
х2,
х3,
стр {
маргина: 0;
}
х1,
х2,
х3 {
боја: Плави;
породица фонтова: "Вердана" Санс Сериф;
фонт-веигхт: 900;
Висина линија: 1;
}
х2,
х3,
стр {
маргина-дно: 1рем;
}

Сада када сте дефинисали све основне стилове, можете да градите одатле. На пример, елементу контејнера можете додати допуну. Ово ће гурнути садржај даље од ивица вашег претраживача. Затим можете применити а максимална ширина сликама, тако да се могу прилагодити ширини свог контејнера. Поента је да почнете од општих елемената пре него што циљате на специфичне елементе.

Још једном, изглед ће бити прилагодљив. Дакле, како промените величину екрана, величина елемената ће се променити у складу са тим. Као програмер, требало би да будете свесни ових ЦСС савета и трикова јер могу подићи вашу продуктивност на виши ниво.

2. Избегавајте фиксне величине

Када почнете да размишљате о распореду, прва ствар коју треба да имате на уму је избегавање фиксних величина. Фиксне величине се односе на својства као што су ширина: 1000пк, висина: 200пк, и тако даље. Постављање фиксне висине или ширине ће вам само на дуге стазе изазвати проблеме.

Уместо тога, користите прилагодљиве висине и ширине. Један од начина је употреба мин-висина и мин-ширина уместо висина и ширина. На пример, претпоставимо да сте поставили ширину елемента на 600пк. Када будете мањи од 600 пиксела, садржај ће се прелити:

Уместо тога, требало би да промените својство из ширина до максимална ширина. Витх максимална ширина, елементу ће бити дозвољено да се смањи како се прозор претраживача сужава. А ако прозор постане широк, текст ће се проширити на првобитну дужину. Ево резултата:

Ово је исто за висина. На пример, претпоставимо да сте поставили висина заглавља на фиксну вредност од 200пк.

заглавље {
висина: 200пк;
приказ: грид;
плаце-итемс: центар;
}

Ово савршено центрира све у заглављу. Али када сузите прозор прегледача, садржај ће на крају истећи из свог контејнера. А то је зато што сте поставили фиксну висину на заглављу.

Обично, висина и ширина оба су опасна својства. Решење је коришћење прилагодљиве висине и ширине, тј. мин- и максимална висина, и мин- и максимална ширина. У овим случајевима, ако прегледач наиђе на ситуације у којима садржај постаје дужи, онда ће заглавље расти како би се прилагодило томе.

Ово је један од најчешће ЦСС грешке које треба избегавати.

3. Запамтите да ваша веб локација подразумевано одговара

Имајте на уму да ваша веб локација реагује чак и пре него што напишете један ред ЦСС кода. Овај начин размишљања вам може помоћи да избегнете прекомерно компликовање процеса дизајна. Распоред ће функционисати на масивним екранима и малим екранима. Можда није лепо. Можда је чак и тешко читати на великим екранима. Али веб локација се прилагођава прозору за приказ без обзира на његову величину.

Наравно, слике се могу преливати, а текст може бити премали. Али нећете ништа изгубити са подразумеваним распоредом. Ваш текст се неће разбити, а сви елементи ће бити видљиви на екрану.

Разумевање и прихватање ове чињенице може заиста помоћи када пишете свој ЦСС код. Када наиђете на проблеме, бићете сигурни да грешка потиче од ЦСС-а који сте написали. Ово олакшава проналажење проблема и његово отклањање.

Покушајте да користите медијске упите само да бисте додали сложеност. На пример, када желите да ваш изглед има три колоне на већим екранима. У супротном, немојте их користити. За дубоко уроњење у медијске упите, прочитајте наше водич за медијске упите.

Ево једног сценарија. Замислите да је елемент са именом класе .разделити има три елемента у себи. Са следећим ЦСС-ом, биће креиран изглед са три колоне:

.разделити {
приказ: флек;
флек-дирецтион: ред;
јаз: 2рем;
}

На мањим екранима (40ем широк или мање), желели бисте да све заузима једну колону. Дакле, урадио би ово:

@медиа(максимална ширина: 40ем) {
.разделити {
приказ: блокирати;
 }
}

Овде замењујете подразумевано поравнање (три колоне). Али медијски упит је непотребан јер претраживач користи дисплеј блок подразумевано. Дакле, не морате то експлицитно дефинисати.

Имајући то на уму, можете рефакторисати свој код да бисте користили један медијски упит који се односи само на велике екране. Тамо ћете се пребацити на три колоне када је екран шири од 40ем:

@медиа(максимална ширина: 40ем) {
.разделити {
приказ: флек;
флек-дирецтион: ред;
јаз: 2рем;
 }
}

На малим екранима, претраживач ставља све у једну колону. Али не морате да га наведете јер претраживач користи дисплеј блок подразумевано. Дакле, користили сте само медијске упите да додате сложеност.

Дакле, уместо да додајете сложеност и да онда морате да заобиђете гомилу својстава, сада додајете сложеност када вам је потребна. Већину времена ће вам требати само мин-ширина медијски упити. Почните са мобилним уређајима, а затим када сајт изгледа одлично на мобилном уређају, додајте сложеност (нпр. колоне) за верзију за десктоп рачунаре.

5. Искористите предности модерног ЦСС-а

Користећи модерне ЦСС приступе, можете се удаљити од већине проблема са поравнањем и преломних тачака и кренути ка постизању унутрашњег дизајна.

Један од начина на који то можете учинити је:

х1 { фонт-сизе: цламп (3рем, 1рем + 10вв, 7рем)}

Ово стеже х1 између минималне и максималне величине фонта. Најмањи у који желимо да иде је 3рем а највиши је 7рем. Средина је оно што ћемо понављати (1рем + 10 вв). Као резултат, наслов ће се аутоматски смањити како се оквир за приказ буде смањивао и повећавао како постаје већи.

Сазнајте више о модерном ЦСС-у

ЦСС је много еволуирао током година. Данас имамо новије и боље приступе за позиционирање елемената у ЦСС-у. У овом чланку смо се дотакли неких од ових пракси и истакли како вам оне могу помоћи да избегнете уобичајене замке у дизајну. Један од најбољих начина за учење модерног ЦСС-а је практичан приступ, као што је коришћење модерног ЦСС-а за дизајнирање ХТМЛ табеле.