Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

CSS stil, ki omogoča odzivno besedilo
Avtor: NikMan | Objavljeno: dne 2. junij 2013, 12:06
Delite vsebino na Facebooku
Delite vsebino na Twitterju
  Danes je v praktični uporabi veliko različnih velikosti zaslonov in pokazal vam bom CSS kodo, ki omogoča prilagajanje velikosti besedila njim.
 
 
1
  
 
Ustvarite nov HTML dokument.
 
 
2
  
 
Potem pa napišite neko poljubno besedilo in dodajte še nek poljuben naslov.
 
 
3
  
 
Ko boste to storili, se preklopite v kodni način.
 
 
4
  
 
Postavite se nato v polje med <head> in </head>.

Vmes lahko popravite še naslov strani, ki se nahaja med <title> in </title>.
 
 
 
 
 
5
  
 
Sedaj prilepite naslednjo kodo:

<style type="text/css">
body {font-size: 100%; font-family:Tahoma; }
.wrap {width:90%; margin:0 auto; }
h1 {font-size: 2.5em; font-weight: 600; }
p { font-size: 1em; font-family: Tahoma; }
@media only screen and (min-width: 1100px) {
body { font-size:250%;}
}  
      
@media only screen and (max-width: 800px) {
body { font-size:100%;}
}   
@media only screen and (max-width: 400px) {
body { font-size:40%;}
}
</style>

V kodi je razvidno kaj koda počne, vendar pa v primeru dodatnih vprašanj ne odlašajte in postavite vprašanja na forum.
 
 
6
  
 
Potem se postavite pod značko <body> in vpišite kodo 

<div class="wrap">
 
 
7
  
 
In na koncu besedila dodajte še zaključek značke </div> (glej sliko).
 
 
8
  
 
Sedaj dodajte še v naslov značko <h1> in na koncu </h1>, ki predstavlja zaključek (glej sliko).
 
 
9
  
 
Tisti <br> lahko tudi pobrišete, če želite.
 
 
10
  
 
Shranite stran in si jo poglejte v brskalniku, ki ima razširjen okvir.

Kliknite tukaj, da si ogledate moj primer.
 
 
11
  
 
Okvir brskalnika sedaj pomanjšajte in opazili boste, da se bo velikost pisave in naslova spremenila.
 
 
12
  
 
Prav tako velja za zelo malo okno.
 
 
Komentiraj
  
 
 
 
 
22.7.2015, 16:04
Ali lahko to vključiš v ločeno CSS datoteko?
 
 
 
 
22.7.2015, 18:17
Meni se samo prelomi. Nič se ne zmanjša velikost.
 
 
 
 
23.7.2015, 16:19
probi to dodat v head dokumenta:

<meta name="viewport" content="width=device-width, initial-scale=1">
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com