Как я могу масштабировать всю веб-страницу с помощью CSS? - PullRequest
Новая
       47

Как я могу масштабировать всю веб-страницу с помощью CSS?

130 голосов
/ 21 июля 2009

Используя Firefox, вы можете увеличить всю веб-страницу, просто нажав CTRL + . Это пропорционально увеличивает всю веб-страницу (шрифты, изображения и т. Д.).

Как мне воспроизвести ту же функциональность, используя просто CSS?

Есть ли что-то вроде page-size: 150% (что увеличило бы целые части страницы на х%?)

Ответы [ 8 ]

170 голосов
/ 21 июля 2009

Возможно, вы сможете использовать свойство CSS zoom - поддерживается в IE 5.5+, Opera, Safari 4 и Chrome

Могу ли я использовать: css Zoom

Firefox является единственным крупным браузером, который не поддерживает Zoom ( элемент bugzilla здесь ), но вы можете использовать свойство "proprietary" -moz-transform в Firefox 3.5 .

Чтобы вы могли использовать: 

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
}
59 голосов
/ 01 июля 2013

Это довольно поздний ответ, но вы можете использовать 

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

для увеличения страницы на 110%. Хотя стиль zoom существует, Firefox, к сожалению, его не поддерживает.

Кроме того, это немного отличается от вашего зума. css transform работает как увеличение изображения, поэтому оно увеличит вашу страницу, но не вызовет переформатирование и т. Д.

Редактировать обновлен источник преобразования.

17 голосов
/ 21 июля 2009

Если ваш CSS построен полностью вокруг ex или em единиц, то это может быть возможно и осуществимо. Вам просто нужно объявить font-size: 150% в вашем стиле для body или html. Это должно привести к пропорциональному масштабированию любой другой длины. Вы не можете масштабировать изображения таким образом, если только у них тоже нет стиля.

Но это все равно очень большой , если на большинстве сайтов.

5 голосов
/ 21 июля 2009

Как говорит Йоханнес - недостаточно представителя, чтобы комментировать свой ответ - вы действительно можете сделать это, если размеры всех элементов указаны как кратные размеру шрифта. То есть все, где вы использовали%, их или бывшие единицы ". Хотя я думаю, что% основан на содержании элемента, а не font-size.

И вы не будете обычно использовать эти относительные единицы для изображений, учитывая, что они состоят из пикселей, но есть хитрость, которая делает это намного более практичным.

Если вы определите body{font-size: 62.5%};, то 1em будет эквивалентно 10px. Насколько я знаю, это работает во всех основных браузерах.

Затем вы можете указать свои (например) квадратные изображения размером 100px с помощью width: 10em; height: 10em; и, если масштабирование Firefox установлено по умолчанию, изображения будут иметь свой естественный размер.

Создайте body{font-size: 125%}; и все, включая изображения, будет в два раза больше оригинального размера.

3 голосов
/ 15 июля 2011

С этим кодом 1em или 100% будет равняться 1% роста 

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
1 голос
/ 22 июля 2009

CSS не сможет масштабировать по требованию, но если вы соедините CSS с JS, вы можете изменить некоторые значения, чтобы страница выглядела больше. Однако, как уже было сказано, эта функция является стандартной в настоящее время в современных браузерах: не нужно ее тиражировать. На самом деле, его репликация замедлит работу вашего сайта (больше вещей для загрузки, больше JS или CSS для анализа, выполнения и применения и т. Д.)

1 голос
/ 22 июля 2009

Джон Тан сделал это на своем сайте - http://jontangerine.com/ Все, включая изображения, было объявлено в EMS. Все. Так достигается желаемый эффект. Увеличение текста и увеличение экрана дают почти одинаковый результат.

0 голосов
/ 21 июля 2009

Я думаю, что это невозможно сделать исключительно с помощью CSS - вам может понадобиться испачкать руки Javascript, чтобы убедиться, что работа выполнена правильно.

...