Егер әмбебап блокта жасалған бет компьютерде жақсы көрінсе, бірақ мобильді телефон немесе планшет экранында дұрыс көрсетілмесе, себебі бұл құрылғылардың өлшемдері әртүрлі.

Негізгі ақпарат

Әмбебап блокта планшет пен телефон үшін көлденең және тік күйлерде бейімдеуді орнату қажет.

  • Компьютер үшін блок өлшемі 1200px.
  • Көлденең күйдегі планшет 960px
  • Тік күйдегі планшет 640px
  • Көлденең күйдегі телефон 480px
  • Тік күйдегі телефон 320px

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

Алдымен біз экранның үлкен нұсқасы (компьютер) үшін дизайн жасаймыз.

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

Міне, әр өлшем үшін беттің қалай көрінуі керек екендігінің бірнеше мысалы:

Көлденең күйдегі планшет 960px

Тік күйдегі планшет 640px

Көлденең күйдегі телефон 480px

Тік күйдегі телефон 320px

Веб-сайт құрастырушыдағы барлық негізгі блоктар қажетті экран өлшеміне автоматты түрде бейімделеді. Негізгі блоктар туралы келесі мақалалардан оқыңыз.