Лучший способ масштабировать элементы HTML

Question

Я ищу некоторые варианты, касающиеся масштабирования некоторых элементов HTML для использования на большом экране (например, в киоске). В настоящее время я использую CSS3 scale(), чтобы получить относительно кросс-браузерный масштаб (благодаря cssplease), но проверяю, есть ли у кого-нибудь еще лучшее предложение.

Прежде всего я смотрю на виджеты рендеринга (HTML, js и изображения) в большом масштабе (например, от 400x200px до 800x500). Хотя я мог переписать каждый виджет для большего масштаба, я думал, что я проверю свои варианты.

Есть ли что-то, что SVG может сделать, или холст? CSS3 scale() хорошо, но изображения должны быть заменены на версии с высоким разрешением. Интервал между текстами, похоже, тоже немного не совпадает.

Спасибо!

Answer 1

CSS3-трансформации по-прежнему являются лучшим вариантом для того, что я хочу, особенно для производительности браузера.

Answer 2

Это может быть обширная модернизация, но вы можете определить размеры ваших элементов, используя ems, а затем использовать медиазапросы, чтобы увеличить базовый размер шрифта для разных размеров экрана. Поэтому, если ваш базовый размер шрифта составляет 16 пикселей, ваш основной столбец может быть 47em, боковая панель 12em, для приблизительной ширины сайта 1000 пикселей. Затем вы можете использовать медиа-запросы для определения более крупного браузера, и все, что вам нужно сделать, это увеличить базовый размер шрифта до 20 пикселей, и альт ваш сайт теперь на 25% больше.

Answer 3

Не уверен, правильно ли вы поняли, но если вам нужен ваш веб-сайт, изображения, видео и т. Д., Чтобы они хорошо выглядели на любом экране (с любым разрешением), вы можете попробовать адаптивный дизайн. У вас есть возможность использовать медиа-запросы CSS для настройки веб-сайта под различные разрешения экрана, он также будет поддерживать исходное качество изображения и т. Д.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

Я нашел их очень полезными, и как только вы в них разберетесь, вы легко создадите масштабируемые сайты;))