|
Enamik kodumaiseid disainereid eelistab kasutada px-i, samas kui enamik välismaiseid veebisaite eelistab em ja rem-i, nii et mis on nende kolme vahel ning millised on mõlema eelised ja puudused? Anname sulle põhjaliku sissejuhatuse. PX omadused: 1. IE ei saa reguleerida nende fondi suurust, mis kasutavad px-i ühikuna; 2. Enamikku välismaiseid veebilehti saab kohandada, kuna nad kasutavad fondiühikutena em- või rem-sõnasid; 3. Firefox suudab reguleerida px, em ja rem-i, kuid üle 96% Hiina netikasutajatest kasutab IE brauserit (või kernelit). px pikslid. Suhtelise pikkuse ühikud. Pixel px on suhteline monitori ekraani resolutsiooniga. (Tsitaat CSS2.0 käsiraamatust) em on suhteline pikkusühik. Fondi suurus võrreldes tekstiga praeguses objektis. Kui reas oleva teksti fondisuurust ei määrata kunstlikult, on see suhteline brauseri vaikimisi fondi suurusega. (Tsitaat CSS2.0 käsiraamatust) Iga brauseri vaikimisi fontikõrgus on 16px. Kõik reguleerimata brauserid vastavad nõuetele: 1em=16px. Siis 12px=0,75em, 10px=0,625em. Font-suuruse teisendamise lihtsustamiseks pead CSS-i keha valijas deklareerima font-size=62,5%, mis teeb em väärtuseks 16px*62,5%=10px, nii et 12px=1,2em, 10px=1em, mis tähendab, et peate jagama oma algse px väärtuse 10-ga ja asendama selle ühikuga em-ga. EM omadused: 1. Em väärtus ei ole fikseeritud; 2. Em pärib vanemelemendi fondisuuruse. Seega, kui me kirjutame CSS-i, peame pöörama tähelepanu kahele asjale: 1. Deklareeri font-size=62,5% keha valijas; 2. Jaga oma algne px väärtus 10-ga ja asenda see ühikuga em; 3. Arvuta ümber nende suurendatud fondide em-väärtused. Väldi korduvaid fondisuuruse deklaratsioone. See tähendab, et vältida nähtust 1,2 * 1,2 = 1,44. Näiteks, kui deklareerid 1,2em fondisuuruse #content-s, siis p fondi suuruse deklareerimisel saab see olla ainult 1em, mitte 1,2em, sest see em ei ole see em, ja see saab 1em=12px, sest pärib fondi kõrguse #content. REM-tunnused rem on uus suhteline ühik (root em), mis lisati CSS3-sse ja on pälvinud palju tähelepanu. Mis on sellel seadmel ja EM-il? Erinevus seisneb selles, et kui sa kasutad rem-i elemendi fondi suuruse määramiseks, on see ikkagi suhteline suurus, kuid suhteline on ainult HTML-i juurelement. Seda ühikut võib öelda, et see ühendab suhtelise suuruse ja absoluutse suuruse eelised, mille kaudu saab mitte ainult muuta juurelementi, et kõiki fondi suurusi proportsionaalselt kohandada, vaid ka vältida fondisuuruste kiht-kihi liitmise ahelreaktsiooni. Praegu toetab rem kõigis brauserites peale IE8 ja varasemate brauserite. Brauseritele, mis seda ei toeta, on vastus väga lihtne – kirjutada absoluutne ühikulause. Need brauserid ignoreerivad rem-iga seatud fondi suurust. Siin on näide: p {font-size:14px; fondi suurus: .875rem; } Märkus:Fondiühikute valik sõltub suuresti sinu projektist ja kui kasutajaskond kasutab brauseri uusimat versiooni, siis soovitatakse REM-i, kui ühilduvus on probleem, siis kasuta px-i või mõlemat. Siin on px, em, rem ühiku teisendamise tööriista aadress:http://pxtoem.com/
| 
Postitatud 21.03.2017 09:31:50
|
|
|
