Как вывести html-сраницу с динамическими данными?

Добрый день. Собираю "Умный дом". Два водосчетчика с импульсным выходом подключены к плате ESP8266. Плата считает импульсы и выдает считанные данные по WiFi. Эта вся кухня работает, вопрос по визуализации. Подскажите как, или поделитесь пожалуйста ссылкой, как мне эти цифры вывести в нужном месте. Сейчас картинка выглядит вот так:
5ff87822bf734308722624.jpeg
Т.е. выводится картинка в виде обычного , а span-ы с цифрами, имея position : absolute; подогнаны по месту. Разумеется, при изменении масштаба, span-ы улетают. Просьба подсказать, как лучше всего реализовать, чтобы при изменении масштаба, цифры оставались в нужных местах, ибо подобных "приборок" будет еще несколько. Можно, наверное, с помощью Javascript пересчитывать все координаты, но вдруг есть более "красивые" способы. Спасибо.
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 2
solidcreature
@solidcreature
WordPress-митапы в Москве (vk.com/wpmeetup)
Добрый день. Чтобы верстка не ехала при масштабировании -- замените все размеры: ширину, высоту, отступы на % или vw (единицы vieport width). Получите резиновую верстку. Вариант не идеальный, но вполне рабочий.

Для удобства пересчета в проценты можно использовать Фотошоп:
• Создайте документ, соответствующий вашему разрешению и скомпонуйте объекты
• Включите линейки (ctrl + R)
• Переключите единицы измерения на Проценты (для этого кликнете по линейке правой кнопкой мышки)
• Включите панель Info, чтобы видеть актуальные размеры
Ответ написан
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
Можно было бы картинку переделать в SVG формат, и число подогнать под размер картинки. Далее уже вместо числа вставлять ответ.

Или картинку обернуть в жесткий блок с max-width; max-height максимальной ширины и высоты картинки, а числа загнать абсолютом. Таким образом при любом ресайзе картинка останется на месте и не будет "ехать".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы