silt:

< keha >
< div klass = 'sisu' >
< h1 > Tere tulemast Linuxi vihjesse. < / h1 >
< lk > Populaarne portaali veebisait Linux Hint pakub suurepärast teavet arvutiteaduse teemade kohta. < / lk >
< / div >
< / keha >

2. samm: rakendage CSS-i
Esmalt määrake ' fondi suurus ' kuni ' 16 pikslit ' ja 'joonekõrgus' kuni ' 1.5 ”. Lisaks määrake ka font

ja

sildid:

keha {
fondiperekond: sans-serif;
font- suurus : 18 pikslit;
rida- kõrgus : 1.5 ;
}

h1 {
tekst- joondada : Keskus;
font- suurus : 26 pikslit;
}

lk {
font- suurus : 18 pikslit;
}

Väljund
Siin on koodi väljund, mis sobib kõikidele ekraanisuurustele:

---

---

3. samm: rakendage meediumipäring

• Esiteks mainige '@mainimine' märkige ja määrake ekraani suurus ' 768 pikslit ' juurde ' maksimaalne laius ” vara. See ekraanisuurus rakendub kõigile ekraanidele, mille suurus on võrdne või väiksem 768 pikslit ”.
• Pärast seda määrake fondi suurus ,

  ja

  sildid:

@ meedia ( max- laius : 768 pikslit ) {
keha {
font- suurus : 16 pikslit;
rida- kõrgus : 1.5 ;
}

h1 {
font- suurus : 22 pikslit;
}

lk {
font- suurus : 14
}
}

Allpool on väljund pärast meediumipäringu rakendamist. Meediapäring oli mõeldud seadmetele, mille ekraani suurus on võrdne või väiksem kui ' 768 pikslit ”:

Järeldus

Et parandada loetavust fondi suuruse määramisega, arendage esmalt loetavust ja fondi suurust. Lisaks mõistke erinevaid fondi suurusi ja fondisilte. Valige sobiv fondi suurus ja seejärel valige sobiv rea kõrgus. Tavaliselt on rea kõrgus 1,2 korda suurem fondi suurusest. Lisaks valige veebisisu jaoks sobiv fondiperekond. See artikkel on näidanud praktilist viisi loetavuse parandamiseks fondi suuruse määramisega.