web-dev-qa-db-fra.com

Comment puis-je redimensionner une page Web entière avec CSS?

Avec Firefox, vous pouvez agrandir une page Web entière en appuyant simplement sur CTRL+. Cela a pour effet d’agrandir proportionnellement l’ensemble de la page Web (polices, images, etc.).

Comment puis-je reproduire la même fonctionnalité en utilisant simplement CSS?

Y a-t-il quelque chose comme page-size: 150% (qui augmenterait les portions de page entières de x%?)

htmlcssresize
132
TimH

Vous pourrez peut-être utiliser la propriété CSS zoom - prise en charge dans IE 5.5+, Opera et Safari 4 et Chrome.

Puis-je utiliser: Zoom CSS

Firefox est le seul navigateur principal qui ne prend pas en charge Zoom ( item bugzilla ici ) mais vous pouvez utiliser la propriété "propriétaire" -moz-transform dans Firefox 3.5 .

Pour que vous puissiez utiliser:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-Origin: 0 0;
}
170
Jon Galloway

Ceci est une réponse plutôt tardive, mais vous pouvez utiliser

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

pour agrandir la page de 110%. Bien que le style zoom existe, Firefox ne le prend toujours pas en charge, malheureusement.

En outre, ceci est légèrement différent de votre zoom. Le css transform fonctionne comme un zoom d’image, ainsi il agrandira votre page mais ne provoquera pas de refusion, etc.

Edit mis à jour l'origine de la transformation.

61
kumarharsh

Si votre CSS est construit complètement autour de ex ou em unités, alors cela pourrait être possible et réalisable. Vous devez simplement déclarer font-size: 150% dans votre style pour body ou html. Cela devrait entraîner l’échelle proportionnelle de toutes les autres longueurs. Cependant, vous ne pouvez pas redimensionner les images de cette manière, à moins qu'elles n'obtiennent également un style.

Mais c'est un très grand si sur la plupart des sites, en tout cas.

17
Joey

Comme le dit Johannes - pas assez de rep pour commenter directement sa réponse - vous pouvez le faire tant que les dimensions "de tous les éléments sont spécifiées sous la forme d'un multiple de la taille de la police. unités". Bien que je pense que% sont basés sur un élément contenant, pas sur la taille de la police.

Et vous n'utiliseriez pas normalement ces unités relatives pour les images, étant donné qu'elles sont composées de pixels, mais il existe une astuce qui rend cela beaucoup plus pratique.

Si vous définissez body{font-size: 62.5%};, alors 1em sera équivalent à 10px. Autant que je sache, cela fonctionne sur tous les principaux navigateurs.

Ensuite, vous pouvez spécifier vos images carrées de 100 pixels par exemple avec width: 10em; height: 10em; et en supposant que la mise à l'échelle de Firefox est définie par défaut, les images auront leur taille naturelle.

Créez body{font-size: 125%}; et tout - y compris les images - sera au double de la taille originale.

5
e100

Avec ce code, 1em ou 100% sera égal à 1% de la hauteur du corps

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
3
Cedric Austen-Brown

Jon Tan a fait cela avec son site - http://jontangerine.com/ Tout ce qui comprend les images a été déclaré dans ems. Tout. C'est ainsi que l'effet souhaité est obtenu. Le zoom de texte et le zoom d’écran donnent presque exactement le même résultat.

1
Andy Ford

CSS ne pourra pas effectuer de zoom sur la demande, mais si vous associez CSS à JS, vous pouvez modifier certaines valeurs pour rendre une page plus grande. Cependant, comme il a été dit, cette fonctionnalité est la norme dans les navigateurs modernes: inutile de la répliquer. En fait, la répliquer ralentira votre site Web (plus de choses à charger, plus de JS ou de CSS à analyser ou à exécuter et à appliquer, etc.)

1
T0xicCode
 * {
transform: scale(1.1, 1.1)
}

cela transformera chaque élément de la page

0
Rushabh Sooni