Prilagođavanje veličine fonta veličini ekrana?

[ZoNi]

Da li je ovo nekako moguće uraditi samo sa HTMLom i CSSom: imamo neki tekst. Želimo da on uvek zauzima ceo prozor brauzera, što znači da ako je prozor manji, moraće da se smanji i font i obrnuto.

Moguće ili jok?

[Game fever]

Jedino sto mi pada napamet je da se velicina fonta izrazi u procentima. Procenti u odnosu na parent container, ako je parent container browser (body) onda bi text velicine 100% bio od desne ivice ekrana do leve.

[dare023]

http://www.w3schools.com/cssref/pr_font_font-size.asp

[Remedy]

Mozes da koristis css media queries, kao sto se kod framework-ova koriste da "prepakuju" grid u zavisnosti od rezolucije. Samo ti menjaj velicinu fonta.

p{
   font-size: 10rem;
}

@media (min-width: 500px){
   p{
      font-size: 12rem;
   }
}

@media (min-width: 800px){
   p{
      font-size: 14rem;
   }
}

[Neutrino]

Remedy kaže:

Mozes da koristis css media queries, kao sto se kod framework-ova koriste da "prepakuju" grid u zavisnosti od rezolucije. Samo ti menjaj velicinu fonta.

p{
   font-size: 10rem;
}

@media (min-width: 500px){
   p{
      font-size: 12rem;
   }
}

@media (min-width: 800px){
   p{
      font-size: 14rem;
   }
}

Kad god je to moguće izbegavaj rem jedinice jer se uvek računaju u odnosu na root (html) element i tako poništavaju najbitniju osobinu responsive designa (i CSS-a) - nasleđivanje.

https://j.eremy.net/confused-about-rem-and-em/

[Remedy]

Pre par dana sam radio nesto sa Foundtion-om pa sam zato koristio rem, ali dobro je objasniti razliku u odnosu na em. Oni dosta koriste rem, njihov sass ima i funkciju "rem-calc" koju koriste za prereacunavanje piksela u rem. Mada sa em-ovima zna da bude smaranje preracunavati.

[Neutrino]

Remedy kaže:

Pre par dana sam radio nesto sa Foundtion-om pa sam zato koristio rem, ali dobro je objasniti razliku u odnosu na em. Oni dosta koriste rem, njihov sass ima i funkciju "rem-calc" koju koriste za prereacunavanje piksela u rem. Mada sa em-ovima zna da bude smaranje preracunavati.

Postoji nepisano pravilo "rem za komponente, em za sve ostalo". Pošto je Foundation baziran na komponentama Zurb je iz nekog razloga rešio da koristi rem. Problem nastaje kasnije kad shvatiš da tvoja komponenta treba da se skalira u odnosu na element (parent) čije su dimenzije definisane em-om jer tvoja komponenta bukvalno poštuje samo root element (html) ali ne i roditeljski kontejner.

Volim slobodu koju donosi Foundation ali rem je jedan od razloga zbog kojeg skoro uvek preporučujem Bootstrap.

[ZoNi]

Hvala svima, pogledaću ovih dana sve predloge

[ZoNi]

Probao sam sve što mi je delovalo OK, ali nisam dobio odgovarajući rezultat

Čisto da još jednom razjasnim šta sam hteo (koristim WordPad zato što mi je bio pri ruci, a pokazuje jasno šta mi treba):

- kada je prozor bruzera mali, font treba da se smanji tako da text popunjava ceo prozor:


- kada se prozor brauzera poveća, i font treba da se poveća automatski, tako da text i dalje popunjava celu stranu:


Verovatno da to ne može samo sa HTMLom i CSSom, ali, pošto je to samo nešto za ličnu upotrebu, onda i nije previše važno

[Damiao]

ZoNi kaže:

Verovatno da to ne može samo sa HTMLom i CSSom, ali, pošto je to samo nešto za ličnu upotrebu, onda i nije previše važno

Probaj ovaj način resize-ovanja fontova. Koriste se jedinice vw (viewport width) i vh (viewport height). I oni imaju svoje manje nedostatke, ali o svemu tome možeš pročitati na gore-pomenutom linku.

[ZoNi]

Probao sam viewport, ali nisam uspeo Još ću malo da se udubim u problematiku

[Sandan]

Baš htedoh da kažem da treba da koristiš vw jedinice ali me Damiao preduhitrio

Bukvalno ne treba uopšte da se udubljavaš u problematiku, samo staviš font-size, recimo, 5vw i opciono text-align: justify; i stvar rešena.

Evo gledam sad kod sebe, radi savršeno (baš onako kako si tražio).


edit: sad tek vidim da je ovo pitanje staro dve nedelje... dakle vrv već rešeno u međuvremenu

[user928]

preko css.a media querijima, ako bas hoces da se font uvek siri/skuplja cim user resizuje browser onda neki js libary kao npr: flowtype