Archief - Tekstgrootte met browser mee laten schalen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
G

GMTM

Legacy Member
Hi y'all...

Ik dacht dat ik hier wel terechtkon met mijn vraag...
Ik wil temporary website maken, heel simpel allemaal, maar toch zit ik vast.
De link (yousendit) met screen help alles wel wat te visualiseren wat ik tracht uit te leggen...

Kan er iemand met helpen met een script dat ervoor zorgt dat de tekst blijft zoals hij staat (tekst is geen img) en dat deze dus bijgevolg meeschaalt als je de browser verkleint...


Dank bij voorbaat!

Gert
A

Albireo

Legacy Member
(heel) simpel scriptje (met dank aan JQuery), je stelt een basis op, 16px font-size bij een breedte van 1024px in het voorbeeld, en naargelang de breedte van je browservenster wijzigt, wordt de font-size van de body (en dus ook alles wat erin zit) evenredig veranderd. Je kan ook rekening gaan houden met de hoogte natuurlijk...

Gebruik in je stylesheet geen absolute font-sizes (px,pt,...) maar relatieve eenheden (%,em,...) anders gaat het niet werken

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>My first HTML document</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			var baseWidth=1024;
			var baseFontSize=16 //16 pixels
			$(document).ready(function() {
				ScaleText();
			});
			$(window).resize(function() {
				ScaleText();
			});
			function ScaleText() {
				$('body').css('fontSize',parseFloat(baseFontSize)*$(window).width()/baseWidth);
			}
		</script>
	</head>
	<body>
		<h1>Hello world!</h1>
		<p>This is me!</p>
	</body>
</html>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan