font-size vw aanpassen aan div
Dit is wat ik heb alleen de font-size: 4vw; wordt alleen toegepast op mijn schermgrootte en niet op die van mijn div. De tekst komt nog steeds voorbij de div en wordt alleen kleiner als ik heel mijn browser klein maak.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="tileswrapper">
<div class="tile tile-logo"> </div>
<div class="tile tile-cert"> </div>
<div id="flip">
<div class="tile tile-pwd front">
<p class="text-center">Klik voor<br/>wachtwoord</p>
</div>
<div class="tile tile-pwd back">
<p class="text-center">435DFGrfghjghjghjf45</p>
</div>
</div>
<div class="tile tile-help"> </div>
</div>
<div class="tile tile-logo"> </div>
<div class="tile tile-cert"> </div>
<div id="flip">
<div class="tile tile-pwd front">
<p class="text-center">Klik voor<br/>wachtwoord</p>
</div>
<div class="tile tile-pwd back">
<p class="text-center">435DFGrfghjghjghjf45</p>
</div>
</div>
<div class="tile tile-help"> </div>
</div>
Code (php)
1
2
3
4
5
2
3
4
5
#flip, .tile-pwd {
font-size: 4vw;
width: 466px;
height: 258px;
}
font-size: 4vw;
width: 466px;
height: 258px;
}
Heb even meegezocht, het kan op de "ugly" manier, maar dat is wel CSS only.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media all and (min-width: 50px) { body { font-size:0.1em; } }
@media all and (min-width: 100px) { body { font-size:0.2em; } }
@media all and (min-width: 200px) { body { font-size:0.4em; } }
@media all and (min-width: 300px) { body { font-size:0.6em; } }
@media all and (min-width: 400px) { body { font-size:0.8em; } }
@media all and (min-width: 500px) { body { font-size:1.0em; } }
@media all and (min-width: 600px) { body { font-size:1.2em; } }
@media all and (min-width: 700px) { body { font-size:1.4em; } }
@media all and (min-width: 800px) { body { font-size:1.6em; } }
@media all and (min-width: 900px) { body { font-size:1.8em; } }
@media all and (min-width: 1000px) { body { font-size:2.0em; } }
@media all and (min-width: 1100px) { body { font-size:2.2em; } }
@media all and (min-width: 1200px) { body { font-size:2.4em; } }
@media all and (min-width: 1300px) { body { font-size:2.6em; } }
@media all and (min-width: 1400px) { body { font-size:2.8em; } }
@media all and (min-width: 1500px) { body { font-size:3.0em; } }
@media all and (min-width: 1500px) { body { font-size:3.2em; } }
@media all and (min-width: 1600px) { body { font-size:3.4em; } }
@media all and (min-width: 1700px) { body { font-size:3.6em; } }
@media all and (min-width: 100px) { body { font-size:0.2em; } }
@media all and (min-width: 200px) { body { font-size:0.4em; } }
@media all and (min-width: 300px) { body { font-size:0.6em; } }
@media all and (min-width: 400px) { body { font-size:0.8em; } }
@media all and (min-width: 500px) { body { font-size:1.0em; } }
@media all and (min-width: 600px) { body { font-size:1.2em; } }
@media all and (min-width: 700px) { body { font-size:1.4em; } }
@media all and (min-width: 800px) { body { font-size:1.6em; } }
@media all and (min-width: 900px) { body { font-size:1.8em; } }
@media all and (min-width: 1000px) { body { font-size:2.0em; } }
@media all and (min-width: 1100px) { body { font-size:2.2em; } }
@media all and (min-width: 1200px) { body { font-size:2.4em; } }
@media all and (min-width: 1300px) { body { font-size:2.6em; } }
@media all and (min-width: 1400px) { body { font-size:2.8em; } }
@media all and (min-width: 1500px) { body { font-size:3.0em; } }
@media all and (min-width: 1500px) { body { font-size:3.2em; } }
@media all and (min-width: 1600px) { body { font-size:3.4em; } }
@media all and (min-width: 1700px) { body { font-size:3.6em; } }
Anders kom je toch al snel op javascript meen ik te lezen..
En anders heb je zo iets:
Code (php)
1
2
3
4
2
3
4
p {
font-size: 30px;
font-size: 3.5vw;
}
font-size: 30px;
font-size: 3.5vw;
}
Maar dan is het gebaseerd op de viewport.
Gewijzigd op 07/11/2016 13:43:31 door Wesley -
De reden waarom ik geen word-wrap wil gebruiken is omdat ik het graag op een regel wil houden. In de div komt namelijk een wachtwoord te staan en dit kunnen gebruikers eruit kopieren. Als ik het wachtwoord breek dan zullen er vast een paar zijn die het niet goed kopieren.
De reden dat ik de font-grootte wil veranderen is omdat ik nu nog niet weet of het wachtwoord van 8 characters in de toekomst misschien wel niet meer characters wordt.
Maar als ik de font grootte in vw aangeef dan veranderd het wel naar mate het scherm grooter/kleiner wordt. Volgens mij kan dit ook aan de hand van de breedte van een div.
Gewijzigd op 07/11/2016 13:45:08 door Danny von Gaal
Danny von Gaal op 07/11/2016 13:43:25:
In de div komt namelijk een wachtwoord te staan en dit kunnen gebruikers eruit kopieren. Als ik het wachtwoord breek dan zullen er vast een paar zijn die het niet goed kopieren.
Misschien een alternatief voor je, maak een knop onder het wachtwoord Copy to clipboard, of kopieer hier het wachtwoord.
Ik heb wat voor je gefixt (in normale en schone code). Wellicht kun je hier iets mee ...
Als je het formaat van het browservenster aanpast, zul je zien dat de tekst keurig meeschaalt.
Enjoy ;-)
https://jsfiddle.net/7ckt3bar/1/
Bedankt voor de moeite die je hebt genomen. Alleen ik wil dat de tekst kleiner wordt wanneer er meer tekst in de div komt en dit dan alsnog op een regel blijft staan.
Ik heb je fiddle aangepast en de div een width gegeven en de tekst vermeerderd en dan valt het ook buiten de div.
https://jsfiddle.net/7ckt3bar/3/
Dat klinkt als een verkeerde insteek. Je moet van tevoren dan al een idee hebben van wat de maximale lengte is, en die moet je dan leidend maken ... want wat als het ineens een tekst is van 100 tekens? Dan krijg je letters die zo klein zijn dat ze onmogelijk te lezen zijn.
Je zult dan dus een keuze moeten maken hoeveel tekens het maximaal mag zijn, en daar moet je dan vanuit gaan.
Ik weet zeker dat dit kan want ik heb het wel is vaker gezien. Maar misschien moet ik inderdaad met javascript gaan werken dan.
Gewijzigd op 08/11/2016 08:29:53 door Danny von Gaal
Tja ... ik lees "in de toekomst" en ik lees "misschien".
Dat zijn maar liefst 2 onzekerheden. Wat houdt je tegen om het nu in te richten voor 8 tekens en ALS het er ooit 10 worden even de font-size aan te passen?
Begrijp me niet verkeerd hoor. Van mij mag je gerust een javascript oplossing implementeren, maar je bouwt dan iets in "voor het geval misschien ooit wie weet in de toekomst".
Ik zou zeggen, stel de font-size nu gewoon vast in, en verander dat getalletje als het ooit 10 tekens worden. ;-)