font-size

stanke · 06. 07. 2013.

Napravio sam sajt u procentima, zanima me kako da napravim da slova budu srazmerna velicini Browsera kad korisnik smanjuje browser. Sta da koristim a p elemente koju naredbu iz css ili je mozda potreban nek ijavascript kod

<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
width:100%;

}
#telosajta
{
top: auto;
margin: auto;
position: relative;
width: 80%;
height: 100%;
}
.div1
{
border: 1px solid #000;
float: left;
width: 80%;
height:60%;
}
</style>

<body>
<div id="telosajta">
<div class="div1">
<img src="slika/slika.png" width="100%" height="100%" title="slika">
<p>Neki tekst</p>
</div>
</div>

</body>
</html>

Filip · 06. 07. 2013.

Koristi media queries.

ivanhoe · 06. 07. 2013.

media queries su pametnije resenje, ali one ce da smanjuju font u koracima...ako zelis bas da se font resajzuje proporcionalno onda moras preko javascripta

kickloop · 07. 07. 2013.

http://snook.ca/archives/html_and_cs...-size-with-rem

Br@nkoR · 07. 07. 2013.

https://github.com/davatron5000/FitText.js
https://github.com/zachleat/BigText
https://github.com/STRML/jquery.textFit
https://github.com/pxldot/squishy
http://charliepark.org/hatchshow/
https://github.com/freqDec/slabText/

ivanhoe · 07. 07. 2013.

Citat:

Originalno napisao kickloop

http://snook.ca/archives/html_and_cs...-size-with-rem

kako sa rem napraviti da font-size zavisi od dimenzija parenta?

jablan · 08. 07. 2013.

Malo sam radoznao, zašto bi to radio? Mene kao korisnika bi lično nerviralo kad bi mi sajt menjao veličinu fonta tek tako.

stanke · 09. 07. 2013.

Pronasao sam resenje ako nekome treba:
<script type="text/javascript">
var original_layout_size = 1024; // arbitrary
var root_element = document.getElementsByTagName("html")[0];
var original_window_size = root_element.clientWidth;
var original_font_size = root_element.style.fontSize;
function change_font_size(window_size) {
var new_font_size = Math.floor(100 * window_size / original_layout_size);
root_element.style.fontSize = new_font_size + "%";
}

window.onload = function () {
if (original_window_size != original_layout_size) {
change_font_size(original_window_size);
}
};

window.onresize = function () {
var new_window_size = root_element.clientWidth;
change_font_size(new_window_size);
};

stanke · 09. 07. 2013.

To radim ako neko ima monitor od 22" ili veci pa nece da drzi Maximaze otvoren browser, mozda neko otvara dva tri browsera radi pretrage pa ih raspodeljuje na trecine ekrana, jel si razmisljao nekad o tome plus ako korisnik smanjuje Browser videce preko celog browsera ceo sajt ne samo deo, a i ako pristupi preko mobilnog ili tab-a bice mu prikazan normalan sajt a ne razbacani delovi sadrzaja sajta.

nn.nn · 09. 07. 2013.

Citat:

Originalno napisao jablan

Malo sam radoznao, zašto bi to radio? Mene kao korisnika bi lično nerviralo kad bi mi sajt menjao veličinu fonta tek tako.

Mene bi puno nervirao. Tj. prvo bi me, možda, nasmejao, ali bi me posle svakako nervirao, naročito ako na sajtu ima i nešto korisno. U svakom slučaju, sumnjam da bih se vraćao na takav sajt.

06. 07. 2013.	#1
stanke član Certified Datum učlanjenja: 06.09.2012 Poruke: 64 Hvala: 0 342 "Hvala" u 10 poruka	font-size Napravio sam sajt u procentima, zanima me kako da napravim da slova budu srazmerna velicini Browsera kad korisnik smanjuje browser. Sta da koristim a p elemente koju naredbu iz css ili je mozda potreban nek ijavascript kod <!DOCTYPE html> <html> <head> <style> html, body { height: 100%; width:100%; } #telosajta { top: auto; margin: auto; position: relative; width: 80%; height: 100%; } .div1 { border: 1px solid #000; float: left; width: 80%; height:60%; } </style> <body> <div id="telosajta"> <div class="div1"> <img src="slika/slika.png" width="100%" height="100%" title="slika"> <p>Neki tekst</p> </div> </div> </body> </html>

06. 07. 2013.	#2
Filip član Certified Datum učlanjenja: 10.06.2010 Lokacija: Beograd Poruke: 81 Hvala: 40 16 "Hvala" u 13 poruka	Koristi media queries. __________________ Filip Andrejević \| Svet gitara

06. 07. 2013.	#3
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	media queries su pametnije resenje, ali one ce da smanjuju font u koracima...ako zelis bas da se font resajzuje proporcionalno onda moras preko javascripta __________________ Leadership is the art of getting people to want to do what you know must be done.

07. 07. 2013.	#4
kickloop Mister Master Datum učlanjenja: 25.11.2007 Poruke: 626 Hvala: 114 641 "Hvala" u 96 poruka	http://snook.ca/archives/html_and_cs...-size-with-rem __________________ When you assume, you make an ass out of u and me

07. 07. 2013.	#5
Br@nkoR banned Professional Datum učlanjenja: 04.06.2005 Poruke: 371 Hvala: 0 738 "Hvala" u 83 poruka	https://github.com/davatron5000/FitText.js https://github.com/zachleat/BigText https://github.com/STRML/jquery.textFit https://github.com/pxldot/squishy http://charliepark.org/hatchshow/ https://github.com/freqDec/slabText/ __________________ Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with buls*t.”

08. 07. 2013.	#7
jablan VD IT Direktora Invented the damn thing Datum učlanjenja: 08.06.2005 Lokacija: Beograd Poruke: 2.118 Hvala: 503 1.307 "Hvala" u 282 poruka	Malo sam radoznao, zašto bi to radio? Mene kao korisnika bi lično nerviralo kad bi mi sajt menjao veličinu fonta tek tako. __________________ blog

09. 07. 2013.	#8
stanke član Certified Datum učlanjenja: 06.09.2012 Poruke: 64 Hvala: 0 342 "Hvala" u 10 poruka	Pronasao sam resenje ako nekome treba: <script type="text/javascript"> var original_layout_size = 1024; // arbitrary var root_element = document.getElementsByTagName("html")[0]; var original_window_size = root_element.clientWidth; var original_font_size = root_element.style.fontSize; function change_font_size(window_size) { var new_font_size = Math.floor(100 * window_size / original_layout_size); root_element.style.fontSize = new_font_size + "%"; } window.onload = function () { if (original_window_size != original_layout_size) { change_font_size(original_window_size); } }; window.onresize = function () { var new_window_size = root_element.clientWidth; change_font_size(new_window_size); };