Используя Firefox, вы можете увеличить всю веб-страницу, просто нажав CTRL +. Это пропорционально увеличивает всю веб-страницу (шрифты, изображения и т.д.).
Как я могу копировать одну и ту же функциональность, используя просто CSS?
Есть ли что-то вроде page-size: 150% (что увеличило бы все части страницы на x%?)
Возможно, вы сможете использовать свойство CSS zoom, поддерживаемое в IE 5.5+, Opera и Safari 4, и Chrome
Могу ли я использовать: css Zoom
Firefox - единственный крупный браузер, который не поддерживает Zoom (пункт bugzilla здесь), но вы можете использовать "проприетарное" свойство -moz-transform в Firefox 3.5.
Итак, вы можете использовать:
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
Это довольно поздний ответ, но вы можете использовать
body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
чтобы увеличить страницу на 110%.
Хотя стиль zoom существует, Firefox до сих пор не поддерживает его с грустью.
Кроме того, это немного отличается от вашего увеличения. css transform работает как масштабирование изображения, поэтому оно увеличит вашу страницу, но не вызовет оплату и т.д.
Изменить обновлено происхождение преобразования.
Если ваш CSS построен полностью вокруг единиц ex или em, тогда это возможно и возможно. Вам просто нужно объявить font-size: 150% в вашем стиле для body или html. Это должно привести к тому, что каждая другая длина будет пропорционально масштабироваться. Однако вы не можете масштабировать изображения таким образом, если они не получают стиль тоже.
Но это очень большое, если на большинстве сайтов, во всяком случае.
Как говорит Йоханнес - недостаточно повторить комментарий непосредственно к его ответу - вы действительно можете это сделать, пока размеры всех элементов указаны как кратные размеру шрифта. Значит, все, где вы использовали% em или ex units ". Хотя я думаю, что% основано на содержимом элемента, а не на шрифте.
И вы обычно не использовали бы эти относительные единицы для изображений, учитывая, что они состоят из пикселей, но есть трюк, который делает это намного более практичным.
Если вы определяете body{font-size: 62.5%};, то 1em будет эквивалентен 10px. Насколько я знаю, это работает во всех основных браузерах.
Затем вы можете указать квадратные изображения (например, 100px) с помощью width: 10em; height: 10em; и при условии, что масштабирование Firefox установлено по умолчанию, изображения будут иметь их естественный размер.
Сделайте body{font-size: 125%};, и все - включая изображения - будет иметь двойной первоначальный размер.
При этом код 1em или 100% будет равен 1% от высоты тела
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Джон Тан сделал это со своим сайтом - http://jontangerine.com/ Все, включая изображения, было объявлено в ems. Все. Так достигается желаемый эффект. Увеличение текста и масштабирование экрана дают почти точный результат.
CSS не сможет увеличивать спрос, но если вы объединяете CSS с JS, вы можете изменить некоторые значения, чтобы страница выглядела больше. Однако, как уже было сказано, эта функция сегодня стандартная в современных браузерах: нет необходимости ее тиражировать. По сути, репликация этого замедлит ваш сайт (больше вещей для загрузки, больше JS или CSS для разбора или выполнения и применения и т.д.).
* {
transform: scale(1.1, 1.1)
}
это преобразит каждый элемент на странице
Я думаю, что это невозможно сделать только с помощью CSS - вам может понадобиться, чтобы ваша рука была грязной с помощью Javascript, чтобы убедиться, что работа выполнена правильно.