Les navigateurs Web tels que Internet Explorer, Chrome et Firefox supportent les raccourcis clavier universels pour zoomer dans et hors des pages Web, mais HTML et la conception CSS détermine la façon dont une page se comporte quand il est mis à l`échelle par un utilisateur. Si vous voulez faire de votre page Web plus petit dans tous les navigateurs, vous pouvez utiliser la largeur et la hauteur des attributs dans votre code de modèle, mais vous devez être prudent lors de la spécification des dimensions absolues pour un objet parce que votre page est affichée sur une variété de tailles d`écran. Une solution élégante dans la plupart des cas est de spécifier la largeur d`un objet en tant que pourcentage de son parent.
Faire une page Web que vous affichez dans votre navigateur plus petit en appuyant sur "Ctrl-Minus" pour rétrécir. Vous pouvez également régler le zoom à 100 pour cent en appuyant sur "Ctrl-0." Ces raccourcis sont universels à la plupart des navigateurs, y compris IE, Chrome et Firefox. Zoomer sur une page Web a le même effet sur les éléments HTML comme mise à l`échelle du Fenêtre- leur positionnement est déterminé par la quantité d`espace dans la fenêtre. Pour redimensionner la fenêtre, à gauche, cliquez sur un coin de la fenêtre, faites-le glisser vers le coin opposé, puis le relâcher.
Contrôle de la hauteur et la largeur d`une page Web que vous concevez pour essayer de faire l`expérience de vos téléspectateurs cohérente. Commencez par ouvrir votre code de modèle dans un éditeur de texte. modèles de site Web sont divisés en blocs graphiques en utilisant div ou peut-être des éléments de table, bien que les tables ne sont pas conçus à cet effet. Le bloc div ultrapériphérique peut avoir des blocs div d`enfant, ou votre page Web peut avoir plusieurs éléments div haut niveau sans parents. Si un bloc div a des enfants, son ouverture "
" les précède et sa fermeture "" les suit.Trouvez hauteur et largeur des attributs de chaque élément div. En fonction de la mise en page de votre modèle, ces paramètres sont codés en CSS ou HTML, et le code de votre modèle peuvent inclure des fichiers CSS et HTML distincts ou les combiner en un seul fichier HTML. Si votre page Web contient des fichiers CSS et HTML distincts, ils ont les mêmes noms de fichiers, tels que index.css et index.html, par exemple. Vous pouvez rechercher des éléments div dans la plupart des éditeurs de texte en appuyant sur "Ctrl-F" pour ouvrir la boîte de recherche, puis la recherche de "div."
Abaisser la hauteur ou la largeur d`un élément div en remplaçant sa valeur actuelle avec une plus petite. Cette étape peut prendre un peu d`expérimentation, et vous pouvez visualiser vos modifications en ouvrant votre code de modèle mis à jour dans un navigateur Web. Pour ce faire, à droite, cliquez sur le fichier HTML sur votre bureau, choisissez "Ouvrir dans" et sélectionnez votre navigateur.
Échelle votre page Web pour adapter automatiquement la fenêtre du navigateur. Localisez la classe CSS de l`élément div externe dans votre fichier HTML ou sa feuille de style externe. Définissez sa max-width et height attribue aux valeurs suivantes:
.ultrapériphériques-div-élément {
&# 9-max-width: 100% -
&# 9-height: auto
}Si vous voulez que l`élément à prendre moins de place, insérer un pourcentage plus faible pour max-width. L`utilisation de ce code, la hauteur se règle automatiquement en fonction de la largeur, qui est déterminée par la taille de la fenêtre comme il est mis à l`échelle. L`attribut max-width fournit une apparence uniforme et se sentir pour votre page Web dans toutes les tailles d`écran.
Conseils & Avertissements
- La largeur, max-largeur et la hauteur des attributs déterminent la taille d`un élément HTML. Par exemple, à l`échelle automatiquement une image, à ajouter les attributs suivants à sa définition CSS:
- img {
- max-width: 100%;
- height: auto;
- largeur: auto / 9;
- }
- le "auto / 9" valeur de l`attribut width corrige un problème de mise à l`échelle dans les anciennes versions de IE.
