Webbrowsers zoals Internet Explorer, Chrome en Firefox steun universeel toetsenbord snelkoppelingen voor webpagina's in-en uitzoomen, maar HTML en CSS ontwerp bepaalt hoe een pagina zich gedraagt wanneer het door een gebruiker wordt geschaald. Als u uw webpagina in alle browsers kleiner te maken wilt, kunt u de width en height attributen in uw sjablooncode, maar je moet voorzichtig zijn bij het opgeven van absolute afmetingen voor een object, omdat uw pagina wordt weergegeven op een verscheidenheid van schermafmetingen. Een elegante oplossing in de meeste gevallen is van een object om breedte te geven als een percentage van het bovenliggende object.
Het maken van een Web-pagina die u in je browser kleiner bekijkt door te drukken op "Ctrl-Minus" om uit te zoomen. Ook het instellen van de zoom op 100 procent door te drukken op "Ctrl-0." Deze sneltoetsen zijn universeel voor meeste browsers, waaronder Firefox, IE en Chrome. Zoomen uit een webpagina heeft hetzelfde effect op HTML-elementen als de schaal van het venster; hun positionering wordt bepaald door de hoeveelheid ruimte in het venster. Schaal van het venster met de linkermuisknop op de hoek van een venster, sleept u deze naar de tegenoverliggende hoek en laat u het.
Controle de hoogte en breedte van een webpagina die u ontwerpt om te proberen om uw kijkers ervaring consistent. Begin met het openen van uw sjablooncode in een teksteditor. Website sjablonen zijn verdeeld in grafische blokken met behulp van div of eventueel tabelelementen, hoewel de tabellen zijn niet bedoeld voor dit doel. Het buitenste div blok kind div blokken kan hebben, of de webpagina wellicht verschillende op het hoogste niveau div-elementen zonder ouders. Als een div blok kinderen, de opening heeft"
"vóór hen en haar sluiten""volgt hen.Vind elk div element hoogte en breedte kenmerken. Afhankelijk van de indeling van uw sjabloon, deze instellingen zijn gecodeerd in CSS of HTML, en uw sjablooncode kan aparte CSS en HTML-bestanden opnemen of ze combineren tot één HTML-bestand. Als uw webpagina aparte CSS en HTML-bestanden heeft, hebben ze dezelfde bestandsnamen, zoals index.css en index.html, bijvoorbeeld. U kunt zoeken naar div-elementen in de meeste teksteditors door te drukken "Ctrl-F" om het zoeken te openen en vervolgens te zoeken naar "div."
Lagere hoogte of breedte van een div-element door de huidige waarde vervangen door een kleinere. Deze stap duurt enkele experimenten, en u kunt uw wijzigingen bekijken door uw bijgewerkte sjablooncode in een webbrowser openen. Om dit te doen, met de rechtermuisknop op het HTML-bestand op uw bureaublad, kies "Open In" en selecteer uw browser.
De schaal van uw Web-pagina automatisch aanpassen aan het browservenster. Zoek naar het buitenste div element van CSS-klasse in uw HTML-bestand of de externe stijlpagina. Stel de max-width en height attributen op de volgende waarden:
.outermost-div-element {}
Max breedte: 100%;
hoogte: automobiel;
}Als u wilt dat het element te nemen minder ruimte in beslag, een lager percentage voor max breedte invoegen Met behulp van deze code, de hoogte automatisch aangepast volgens de breedte, die wordt bepaald door de grootte van het venster als het wordt geschaald. Het max-width-kenmerk biedt een uniforme look and feel voor uw Web-pagina over alle schermformaten.
- De breedte, max-width en height attributen bepalen de grootte van elk HTML-element. Bijvoorbeeld, als u wilt automatisch schalen van een afbeelding, de volgende kenmerken toevoegen aan de CSS definitie:
- img {}
- Max breedte: 100%;
- hoogte: automobiel;
- breedte: auto/9;
- }
- De waarde "auto/9" voor het kenmerk width corrigeert een scaling probleem in oudere versies van IE.
