Задать вопрос

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

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

Для удобства пересчета в проценты можно использовать Фотошоп:
• Создайте документ, соответствующий вашему разрешению и скомпонуйте объекты
• Включите линейки (ctrl + R)
• Переключите единицы измерения на Проценты (для этого кликнете по линейке правой кнопкой мышки)
• Включите панель Info, чтобы видеть актуальные размеры
Ответ написан
Комментировать