Отзивчиво оформление за мобилни устройства - PALYCHA Studio

В интернет има безброй статии за адаптивно оформление. Но всъщност те разкъсват взаимно общите думи, но без конкретика. Случи се така, че беше необходимо да се направи адаптивно оформление за клиента за мобилни устройства.

Взех оформлението в движение. Измислих всичко като процент. Но когато се показва на мобилно устройство (Android и IO), оформлението изглежда малко странно. Най-досадно беше малкият размер на шрифта на текста за абзаци. Оттук възникна идеята да напиша този съвет. Така че, нека разглобим всичко и да намерим най-оптималното решение, така че да не изглежда като "на патерици".

И така, за оформлението са ни необходими следните елементи:

  1. Общо разбиране на разрешенията за мобилни устройства.
  2. Настройка на размера изглед.
  3. Javascript.
  4. СSS и MediaQuery.

Общо разбиране на разрешенията за мобилни устройства

Да, точно това е. Yandex ни дава много опции. Става ясно, че има много разрешения. Няма начин да се въведат всички разрешения.

оформление

Почти всички браузъри на мобилни устройства могат и използват преоразмеряване на страници. Те правят преоразмеряването въз основа на техническите данни, получени от устройството. Има три от тях:

  1. devicePixelRatio
  2. ширина на екрана
  3. екран.височина

Тези три параметъра могат да ни дадат много информация. Нека напишем проста функция:

Например на Iphone ще видим „2 320 568 640 1136“, на iPad „2 768 1024 1536 2048“. Lenovo P780 ще докладва „1,5 360 640 540 960“. Тези. ширините на екрана за изброените устройства ще бъдат съответно 640, 1536, 540 пиксела. Правим изводи: трябва да направим версия за екрани, например по-малко от 986 пиксела (стандарт за тесни монитори). Образно казано, ще има две оформления. Едната за екрани с резолюция над 986 пиксела, другата за по-малки. Характеристиките на оформлението на CSS ще бъдат описани в последния раздел.