Направите адаптивни распоред без медијских упита

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

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

Традиционални начин

Прилагодљиви распореди: тачке прекида

Прекидне тачке могу довести до незадовољавајућих резултата за нестандардне оквире приказа

Преносни уређаји преузимају свет. Разне врсте уређаја мењају начин на који израђујемо веб локације. Под „прилагодљивом веб локацијом“ већина људи подразумева само верзије за рачунаре и мобилне уређаје (понекад за рачунаре, таблете, мобилне уређаје). Ово традиционално функционише:

h1 { font-size: 80px; } .container { width: 980px; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: 48px; } .container { width: auto; padding: 0 30px; } }

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

наслов:

Прилагодљиви распореди

Са само једном тачком прелома можете на крају добити чудне величине тачака

Видиш, наша

наслов има „величину фонта: 48 пиксела“ на уређајима ширине 320 пиксела и 800 пиксела, а „величина фонта: 80 пиксела“ на 1024 пиксела и 2560 пиксела.

Наравно, можемо додати још тачака прекида, али број различитих уређаја је безброј! Ово ће карактеристике дизајна учинити врло сложеним и збуњујућим, јер је тешко знати која вредност се примењује на који екран.

Прилагодљиви распореди: величина фонта

Никада не можете створити довољно тачака прекида како бисте на сваком екрану постигли савршену величину слова

Оно што нам заиста треба је ово:

Јединице видног поља

Прилагодљиви распореди: јединице гледишта

Јединице видног поља побољшавају ствари, али и даље им треба радити

Решење овог проблема укључује јединице приказа ВВ и ВХ. То су јединице дужине које представљају 1/100 од ширине / висине оквира за приказ (широко подржани у прегледачима из ИЕ9 +).

Помоћу њих можемо прилагодити својства веб странице према њеној величини. Ситуација ће се мало побољшати, али бол је и даље иста:

како бити слободни илустратор
h1 { font-size: calc( ( 80 / 1920 ) * 100vw; } .container { width: 80vw; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: calc( ( 48 / 375 ) * 100vw; } .container { width: 90vw; } }

Никад не знамо да ли је превелика или премала.

Како можемо да изградимо истински прилагодљиви систем распореда? Како да дизајнирамо прилагодљиву веб страницу која изворно ради од 320 до 2560 пиксела?

Идеално би било да ваша макета објасни логику изгледа и како се она прилагођава са мање резолуције на већу:

Раствор

Прилагодљиви распореди: решење

Ево како да направите заиста прилагодљив систем изгледа

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

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

1920к + и = 80
375к + и = 48

1920 - подразумевана ширина радне површине у дизајну макете (једнако 100 вв)
375 - подразумевана ширина мобилног уређаја у макети дизајна (једнако 100вв)
80 - жељена величина фонта Х1 наслова на радној површини
48 - жељена величина фонта Х1 наслова на мобилном телефону

Ово су вредности Кс и И:

к = (80 - 48) / (1920 - 375)
к = 0,0207

и = 80 - 1920 * 0,0207
и = 40.256

Да бисмо користили ове вредности, требат ће нам функција ЦАЛЦ ЦСС за извршавање прорачуна на веб страници (широко подржани у прегледачима из ИЕ9 +). Требало би да рачунамо Кс * 100 пута (јер је 1ВВ јединица = 1/100 ширине видног поља).

Узимамо своју оригиналну функцију:
1920к + и = 80
375к + и = 48

Замените 1920 са 100вв:
100вв * к + и = жељена вредност

Замените к и и вредностима:
100вв * 0,0207 + 40,256 = жељена вредност

Добијамо коначни ЦСС стил:

h1{ font-size: calc(2.07vw + 40.25px)}

Изненађујуће, то коначно делује баш онако како смо желели!

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

Покушајмо да направимо стварни изглед користећи ову технику:

Али овај приступ има један недостатак: тешко је разумети која вредност стоји иза ове функције ЦАЛЦ. Како то можемо поједноставити?

Ако свакодневно кодирате ХТМЛ, вероватно сте упознати са САСС / СЦСС предпроцесорима. Ево мале помоћи за вас: хајде да направимо „мешање“ и учинимо да се сви ови прорачуни одвијају аутоматски, а да и даље задржимо своје изворне вредности.

То је иста функција као што је горе описано, али направљена као САСС мешавина:

$display-wide: 1920 $display-narrow: 375 @mixin fluid($property, $minValue, $maxValue) $x: ($maxValue - $minValue)/($display-wide - $display-narrow) $y: $maxValue - $display-wide * $x #{$property}: calc(#{100*$x}vw + #{$y}px) h1 @include fluid('font-size',48,80) .container @include fluid('width',315,1580) @include fluid('padding',30,60)

Прилагодљиви распореди: комбинација

САСС мешавина може да олакша читав процес

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

Повезани чланци: