Нөлдік блок: Жауап беру дизайны
Гидтің екінші бөлімі жауапты веб-дизайнмен байланысты неғұрлым күрделі параметрлерге баса назар аударады. Бірінші бөлімде Zero Block редакторының негізгі, негізгі, параметрлер және мүмкіндіктері қамтылды.
Негізгі мүмкіндіктер бойынша шолу мақаласы
Жұмысты жылдамдатуға арналған барлық комбинациялардың тізімі
Қарапайым анимация сілтемесі: Жасампаздық, параллакс және сыртқы көрініс анимациялары
Кешенді қадамдық анимация мақаласы: Негізгі принциптер, параметрлер және мысалдар
Күрделі іске қосу анимациясы анықтамасы: баптау және мысалдар
Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі
Жобаның негізгі құрылымын анықтау және макетті жылдамдату
«Контейнер» ұғымы
Нөлдік блокта екі жұмыс кеңістігі немесе екі «контейнер» бар. Торконтейнері және терезе контейнері - браузер экранының шекарасына арналған стенофор.
Торлы контейнер және оның X-осінің орналасуы
Тор контейнері негізгі жұмыс кеңістігі болып табылады. Тор контейнері Tilda сияқты торды, 12 бағанды (1200 px) пайдаланады. Егер элементтерді Тор контейнерінің ішіне орналастырсақ, онда экран өлшеміне қарамастан, олар 12 баған торының ішінде болады.
X осінде Тор контейнері әрқашан ортада орналасады.
X осінде Тор контейнері әрқашан ортада орналасады.
Әр түрлі құрылғыларға арналған нұсқалармен де осындай жағдай орын алады: экрандар арасында ауысқанда Тор контейнерінің ені 980, 640, 480, 320 px болады, ол өзгеріссіз қалады және әрдайым ортада болады.
Тор контейнерінің биіктігі артборд параметрлерінде немесе тінтуірмен контейнерді жоғары/төмен апару арқылы орнатылуы мүмкін. Ол әрбір ажыратымдылыққа белгіленуі мүмкін. Тор контейнерінің биіктігі - блоктың биіктігі.
Тор контейнерінің биіктігі артборд параметрлерінде немесе тінтуірмен контейнерді жоғары/төмен апару арқылы орнатылуы мүмкін. Ол әрбір ажыратымдылыққа белгіленуі мүмкін. Тор контейнерінің биіктігі - блоктың биіктігі.
Контейнерлердің бір-біріне қатысты Y-осьтік қалпы
Егер блок әрқашан экран биіктігінің 100% алғыңыз келсе, терезе контейнерінің биіктігін Тор контейнерінің биіктігінен басқа биіктікке орнату қажет. Сәйкесінше, артфакті параметрлерінде Терезе контейнері үшін биіктігінің 100% көрсету қажет.
Әрі қарай Тор контейнерінің экранға туралалғанын анықтасын: жоғарғы, ортасы немесе төменгі жағы. Әдепкісі - ортаға туралау.
Элемент үшін контейнерді және шығу тегін өзгерту
Контейнерді өзгерту
Әдепкі бойынша, барлық элементтер Тор контейнерімен байланыстырылады және шығу тегі жоғарғы сол жақ бұрышта болады.
Бірақ кейде элементті тордың орнына экранға байлағыңыз келеді. Мысалы, логотип әрқашан кез келген экранның жоғарғы сол жақ бұрышында болғанын қалайсыз.
Ол үшін элемент параметрлерін ашып, контейнер түрін Терезе контейнеріне өзгертіңіз. Шығу тегі Терезе контейнерінің жоғарғы сол жақ бұрышына ауысады.
Ол үшін элемент параметрлерін ашып, контейнер түрін Терезе контейнеріне өзгертіңіз. Шығу тегі Терезе контейнерінің жоғарғы сол жақ бұрышына ауысады.
Енді кез келген экранда логотип жоғарғы сол жақ бұрышта болады.
Егер элементті, мысалы, жоғарғы оң жақ бұрышқа байланыстырғымыз келсе, онда логика бірдей болады: контейнерді орнатыңыз: Терезе контейнері және шығу тегі: X осі дұрыс, Y осі жоғарғы.
Элемент координаталары
Жұмыс кеңістігіндегі әрбір элементтің координаталары — X осіндегі және Y осіндегі шығу тегіне қатысты оның орны болады.
Нысанды таңдап, параметрлер панелін (қойынды пернесін) ашыңыз және ең жоғарғы жағында нысанның координаталарын көресіз.
Нысанды таңдап, параметрлер панелін (қойынды пернесін) ашыңыз және ең жоғарғы жағында нысанның координаталарын көресіз.
Әдепкі бойынша, барлық элементтердің шығу тегі Тор контейнерінің жоғарғы сол жақ бұрышында. Дегенмен, оны ығыстырып, тіктөртбұрыштың тоғыз нүктесінің бірінде орналасуы мүмкін: жоғарғы оң, төменгі сол және т.б.
Шығу тегінің орнын өзгерту үшін +Контейнер мәзірін ашыңыз (әдепкі бойынша құлады).
Орталықтың шығу тегін орнату әр түрлі экрандар үшін жауап беретін нұсқада жұмыс істеуді жеңілдетеді.
«Резеңке» элементтерді жасау
Біз элементтердің мөлшерін де пайыздық қатынаста белгілеуге болатынын қамтамасыз еттік. Бұл браузер терезесіне байланысты өлшемін өзгертетін «резеңке» элементтерге әкеледі.
Мысалы, экранның жартысы әрқашан сары түсті болғанын қалаймыз. Кескінді қосып, элемент параметрлерінде Терезе контейнерін орнатып, өлшем бірліктерін ені мен биіктігі бойынша пиксел орнына пайызға өзгертіңіз және экран енінен 50% және биіктігінің 100% орнатыңыз. Сондай-ақ осьтердің мәндерін пайызбен орнатуға болады — егер элемент әрқашан экранның оң жақ жартысын алғыңыз келсе, X осінің мәнін 50%-ға дейін орнатыңыз.
Мысалы, экранның жартысы әрқашан сары түсті болғанын қалаймыз. Кескінді қосып, элемент параметрлерінде Терезе контейнерін орнатып, өлшем бірліктерін ені мен биіктігі бойынша пиксел орнына пайызға өзгертіңіз және экран енінен 50% және биіктігінің 100% орнатыңыз. Сондай-ақ осьтердің мәндерін пайызбен орнатуға болады — егер элемент әрқашан экранның оң жақ жартысын алғыңыз келсе, X осінің мәнін 50%-ға дейін орнатыңыз.
Бейне блоктың оң жағы әрқашан экранның жартысын толтыратынын көрсетеді.
Сары төртбұрыштың параметрлері: Контейнер — Терезе, ені — 50%, биіктігі — 100%, X осі бойымен офсетті — 50%.
Мысал: Толық экранды мұқабаны жасау
Мына параметрлермен мұқабаны жасау әдісінің мысалын қарап көрейікші:
— фондық сурет бүкіл экран аймағын алып жатыр
- Тақырып, субтитр және түйме әрқашан экранның ортасында болады
- «Төмен» көрсеткісі әрқашан экранның төменгі жағында болады
— фондық сурет бүкіл экран аймағын алып жатыр
- Тақырып, субтитр және түйме әрқашан экранның ортасында болады
- «Төмен» көрсеткісі әрқашан экранның төменгі жағында болады
1
Артборд параметрлерінде фондық кескінді қосып, параметрді орнатыңыз: Терезе контейнерінің биіктігі — 100%.
2
Үстіңгі деректеме, субтитр және түймешік үшін шығу тегін анықтаңыз — Орталық / Орталық және қажет болған жағдайда Y осінің бойымен офсет орнатыңыз.
3
Көрсеткі үшін Терезе контейнерін тағайындаңыз, шығу тегі: Орта / Төменгі және оны 70 пикселге жоғары жылжытыңыз. Демек, түймешік әрқашан браузер терезесінің төменгі жиегінен 70 пиксел жоғары болады.
Не болғанын көрейік: фондық сурет экранның бүкіл аумағын толтырады, тақырып, мәтін және түймешік ортада тураланады, ал төменгі жағында көрсеткі тураланады.
Мысалды тікелей http://help.tilda.ws/zero-block-example
Экранның енін қиыстыруға арналған элементтерді масштабтау
Әдепкі бойынша, барлық элементтер Тор контейнеріне байланған — бұл жұмыс үстелінде ені 1200 пиксел болатын тіктөртбұрыш, ол әрқашан экранның ортасында орналасқан және монитордың өлшеміне қарамастан бірдей өлшемге ие.
Автокескальдау мүмкіндігі арқылы Тор контейнеріне жататын барлық элементтерді экранның немесе браузердің еніне пропорционалды масштабтауға болады. Тор контейнері 1200 пикселдің бекітілген енін алмайды, экранның бүкіл еніне дейін созылады. Барлық қосылған элементтер бүкіл экранды алу үшін пропорционалды түрде үлкейтіледі.
Авто масштабтауды қосу үшін артборд параметрлерін ашып, Тор контейнерін масштабтау параметрін іздеңіз. Терезе енін автокескіндеу параметрін таңдап, өзгерістерді сақтаңыз.
Автокескальдау мүмкіндігі арқылы Тор контейнеріне жататын барлық элементтерді экранның немесе браузердің еніне пропорционалды масштабтауға болады. Тор контейнері 1200 пикселдің бекітілген енін алмайды, экранның бүкіл еніне дейін созылады. Барлық қосылған элементтер бүкіл экранды алу үшін пропорционалды түрде үлкейтіледі.
Авто масштабтауды қосу үшін артборд параметрлерін ашып, Тор контейнерін масштабтау параметрін іздеңіз. Терезе енін автокескіндеу параметрін таңдап, өзгерістерді сақтаңыз.
Бұл параметр сайт дизайнының HD экрандарын қоса алғанда, кез келген ажыратымдылыққа бейімделуіне мүмкіндік береді. Реттеу жоғары ажыратымдылықтағы экрандардағы артық бос орынды болдырмауға көмектеседі, сондай-ақ дизайнердің жұмысын жылдамдатады — резеңке макетте уақытты босқа шығарудың қажеті жоқ.
Қажет болған жағдайда барлық экран түрлері үшін автоматты масштабтауды орнатуға болады немесе, мысалы, тек мобильді құрылғылар үшін, параметрді экран енінің белгілі бір ауқымында ғана орната аласыз. Жұмыс үстелі нұсқасының контейнері 1200px-тан 1920, 4K немесе тіпті 6K дейін ұлғаяды. Мобильді нұсқасында өлшемі 320px-тан ұлғаяды.
Блоктың биіктігі серпінді болады: ол блокты масштабтау кезінде еніне пропорционалды түрде өзгереді.
Қажет болған жағдайда барлық экран түрлері үшін автоматты масштабтауды орнатуға болады немесе, мысалы, тек мобильді құрылғылар үшін, параметрді экран енінің белгілі бір ауқымында ғана орната аласыз. Жұмыс үстелі нұсқасының контейнері 1200px-тан 1920, 4K немесе тіпті 6K дейін ұлғаяды. Мобильді нұсқасында өлшемі 320px-тан ұлғаяды.
Блоктың биіктігі серпінді болады: ол блокты масштабтау кезінде еніне пропорционалды түрде өзгереді.
Маңызды: Бұл параметр тор контейнеріне байланысты элементтер үшін ғана жұмыс істейді және терезеге байланысты элементтерге әсер етпейді.
Масштабтаумен жұмыс істеу ерекшеліктері
Түймені браузер терезесінің шекарасынан қажетті қашықтықта ұстау үшін, бірақ әр түрлі ажыратымдылықта масштабтамау үшін ол үшін координаталарды Терезе контейнеріне орнатыңыз. Бір блоктың ішінде кейбір элементтерді масштабтау үшін әр түрлі контейнерлерге байланыстыруды пайдаланыңыз және кейбірін браузер жиектерінен бекітілген арақашықтықта қалдырыңыз, бірақ өлшемін өзгертусіз.
Суреттерді кері жүктеген кезде абай болыңыз: олар үлкен экрандарға масштабтау кезінде сапасын жоғалтпау үшін дұрыс өлшемде болуы керек.
Белгішелер үшін svg пішіміндегі векторлық суреттерді пайдаланыңыз және фондық суреттер мен фотосуреттерді шетпен кері жүктеңіз. Tilda-да үлкен кескінді кері жүктеген кезде әдепкі бойынша 1680 пикселге дейін азайтылады, бірақ кері жүктеу кезінде тісті доңғалақ белгішесін бассаңыз, 1920px үлкен өлшемді суретті кері жүктеуге болады. «1920px дейін жүктеуге рұқсат етіңіз» қосқышын қосқышты кері жүктеп алыңыз. 1920px-тан үлкен суреттер жүктей алмайды, себебі бұл өлшем браузердің өнімділігіне және сайттың жүктеу жылдамдығына әсер етеді.
Суреттерді кері жүктеген кезде абай болыңыз: олар үлкен экрандарға масштабтау кезінде сапасын жоғалтпау үшін дұрыс өлшемде болуы керек.
Белгішелер үшін svg пішіміндегі векторлық суреттерді пайдаланыңыз және фондық суреттер мен фотосуреттерді шетпен кері жүктеңіз. Tilda-да үлкен кескінді кері жүктеген кезде әдепкі бойынша 1680 пикселге дейін азайтылады, бірақ кері жүктеу кезінде тісті доңғалақ белгішесін бассаңыз, 1920px үлкен өлшемді суретті кері жүктеуге болады. «1920px дейін жүктеуге рұқсат етіңіз» қосқышын қосқышты кері жүктеп алыңыз. 1920px-тан үлкен суреттер жүктей алмайды, себебі бұл өлшем браузердің өнімділігіне және сайттың жүктеу жылдамдығына әсер етеді.
