Нөлдік блок: Жауап беру дизайны

Нөлдік блокта екі жұмыс кеңістігі немесе екі «контейнер» бар. Торконтейнері және терезе контейнері - браузер экранының шекарасына арналған стенофор.

Тор контейнері негізгі жұмыс кеңістігі болып табылады. Тор контейнері Tilda сияқты торды, 12 бағанды (1200 px) пайдаланады. Егер элементтерді Тор контейнерінің ішіне орналастырсақ, онда экран өлшеміне қарамастан, олар 12 баған торының ішінде болады.

X осінде Тор контейнері әрқашан ортада орналасады.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 360 px, он остается неизменным и всегда по центру.

Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.

Егер блок әрқашан экран биіктігінің 100% алғыңыз келсе, терезе контейнерінің биіктігін Тор контейнерінің биіктігінен басқа биіктікке орнату қажет. Сәйкесінше, артфакті параметрлерінде Терезе контейнері үшін биіктігінің 100% көрсету қажет.

Әрі қарай Тор контейнерінің экранға туралалғанын анықтасын: жоғарғы, ортасы немесе төменгі жағы. Әдепкісі - ортаға туралау.

Әдепкі бойынша, барлық элементтер Тор контейнерімен байланыстырылады және шығу тегі жоғарғы сол жақ бұрышта болады.

Бірақ кейде элементті тордың орнына экранға байлағыңыз келеді. Мысалы, логотип әрқашан кез келген экранның жоғарғы сол жақ бұрышында болғанын қалайсыз.

Ол үшін элемент параметрлерін ашып, контейнер түрін Терезе контейнеріне өзгертіңіз. Шығу тегі Терезе контейнерінің жоғарғы сол жақ бұрышына ауысады.

Енді кез келген экранда логотип жоғарғы сол жақ бұрышта болады.

Егер элементті, мысалы, жоғарғы оң жақ бұрышқа байланыстырғымыз келсе, онда логика бірдей болады: контейнерді орнатыңыз: Терезе контейнері және шығу тегі: X осі дұрыс, Y осі жоғарғы.

Жұмыс кеңістігіндегі әрбір элементтің координаталары — X осіндегі және Y осіндегі шығу тегіне қатысты оның орны болады.

Нысанды таңдап, параметрлер панелін (қойынды пернесін) ашыңыз және ең жоғарғы жағында нысанның координаталарын көресіз.

Әдепкі бойынша, барлық элементтердің шығу тегі Тор контейнерінің жоғарғы сол жақ бұрышында. Дегенмен, оны ығыстырып, тіктөртбұрыштың тоғыз нүктесінің бірінде орналасуы мүмкін: жоғарғы оң, төменгі сол және т.б.

Шығу тегінің орнын өзгерту үшін +Контейнер мәзірін ашыңыз (әдепкі бойынша құлады).

Біз элементтердің мөлшерін де пайыздық қатынаста белгілеуге болатынын қамтамасыз еттік. Бұл браузер терезесіне байланысты өлшемін өзгертетін «резеңке» элементтерге әкеледі.

Мысалы, экранның жартысы әрқашан сары түсті болғанын қалаймыз. Кескінді қосып, элемент параметрлерінде Терезе контейнерін орнатып, өлшем бірліктерін ені мен биіктігі бойынша пиксел орнына пайызға өзгертіңіз және экран енінен 50% және биіктігінің 100% орнатыңыз. Сондай-ақ осьтердің мәндерін пайызбен орнатуға болады — егер элемент әрқашан экранның оң жақ жартысын алғыңыз келсе, X осінің мәнін 50%-ға дейін орнатыңыз.

Бейне блоктың оң жағы әрқашан экранның жартысын толтыратынын көрсетеді.

Мына параметрлермен мұқабаны жасау әдісінің мысалын қарап көрейікші:
— фондық сурет бүкіл экран аймағын алып жатыр
- Тақырып, субтитр және түйме әрқашан экранның ортасында болады
- «Төмен» көрсеткісі әрқашан экранның төменгі жағында болады

Не болғанын көрейік: фондық сурет экранның бүкіл аумағын толтырады, тақырып, мәтін және түймешік ортада тураланады, ал төменгі жағында көрсеткі тураланады.

Әдепкі бойынша, барлық элементтер Тор контейнеріне байланған — бұл жұмыс үстелінде ені 1200 пиксел болатын тіктөртбұрыш, ол әрқашан экранның ортасында орналасқан және монитордың өлшеміне қарамастан бірдей өлшемге ие.

Автокескальдау мүмкіндігі арқылы Тор контейнеріне жататын барлық элементтерді экранның немесе браузердің еніне пропорционалды масштабтауға болады. Тор контейнері 1200 пикселдің бекітілген енін алмайды, экранның бүкіл еніне дейін созылады. Барлық қосылған элементтер бүкіл экранды алу үшін пропорционалды түрде үлкейтіледі.

Авто масштабтауды қосу үшін артборд параметрлерін ашып, Тор контейнерін масштабтау параметрін іздеңіз. Терезе енін автокескіндеу параметрін таңдап, өзгерістерді сақтаңыз.

Данная настройка позволит дизайну сайта адаптироваться под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.

При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 360px.

Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.

Түймені браузер терезесінің шекарасынан қажетті қашықтықта ұстау үшін, бірақ әр түрлі ажыратымдылықта масштабтамау үшін ол үшін координаталарды Терезе контейнеріне орнатыңыз. Бір блоктың ішінде кейбір элементтерді масштабтау үшін әр түрлі контейнерлерге байланыстыруды пайдаланыңыз және кейбірін браузер жиектерінен бекітілген арақашықтықта қалдырыңыз, бірақ өлшемін өзгертусіз.

Суреттерді кері жүктеген кезде абай болыңыз: олар үлкен экрандарға масштабтау кезінде сапасын жоғалтпау үшін дұрыс өлшемде болуы керек.

Белгішелер үшін svg пішіміндегі векторлық суреттерді пайдаланыңыз және фондық суреттер мен фотосуреттерді шетпен кері жүктеңіз. Tilda-да үлкен кескінді кері жүктеген кезде әдепкі бойынша 1680 пикселге дейін азайтылады, бірақ кері жүктеу кезінде тісті доңғалақ белгішесін бассаңыз, 1920px үлкен өлшемді суретті кері жүктеуге болады. «1920px дейін жүктеуге рұқсат етіңіз» қосқышын қосқышты кері жүктеп алыңыз. 1920px-тан үлкен суреттер жүктей алмайды, себебі бұл өлшем браузердің өнімділігіне және сайттың жүктеу жылдамдығына әсер етеді.