|
Lielākajai daļai vietējo dizaineru patīk izmantot px, bet lielākajai daļai ārzemju vietņu patīk izmantot em un rem, tāpēc kāda ir atšķirība starp trim un kādas ir katra priekšrocības un trūkumi? Sniegsim jums detalizētu ievadu. PX funkcijas: 1. IE nevar pielāgot fonta lielumu tiem, kas izmanto px kā vienību; 2. Iemesls, kāpēc lielāko daļu ārzemju vietņu var pielāgot, ir tas, ka tās izmanto em vai rem kā fontu vienības; 3. Firefox var pielāgot px, em un rem, bet vairāk nekā 96% ķīniešu interneta lietotāju izmanto IE pārlūkprogrammu (vai kodolu). px pikseļi. Relatīvā garuma vienības. Pixel px ir relatīvs pret monitora ekrāna izšķirtspēju. (Citēts no CSS2.0 rokasgrāmatas) em ir relatīva garuma vienība. Fonta lielums attiecībā pret tekstu pašreizējā objektā. Ja teksta fonta lielums rindā nav mākslīgi iestatīts, tas būs relatīvs ar pārlūkprogrammas noklusējuma fonta lielumu. (Citēts no CSS2.0 rokasgrāmatas) Noklusējuma fonta augstums jebkurai pārlūkprogrammai ir 16 pikseļi. Visas nepielāgotās pārlūkprogrammas atbilst: 1em=16px. Tad 12px=0.75em, 10px=0.625em. Lai vienkāršotu fonta lieluma konvertēšanu, jums ir jādeklarē font-size=62.5% ķermeņa selektorā css, kas padara em vērtību 16px * 62.5% = 10px, lai 12px = 1.2em, 10px = 1em, kas nozīmē, ka jums tikai jādala sākotnējā px vērtība ar 10 un pēc tam jāaizstāj ar em kā vienību. EM funkcijas: 1. Em vērtība nav fiksēta; 2. em pārmanto vecākelementa fonta lielumu. Tātad, rakstot CSS, mums jāpievērš uzmanība divām lietām: 1. Deklarējiet fonta lielumu = 62.5% ķermeņa selektorā; 2. Sadaliet savu sākotnējo px vērtību ar 10 un aizstājiet to ar em kā vienību; 3. Pārrēķiniet šo palielināto fontu em vērtības. Izvairieties no atkārtotām fonta lieluma deklarācijām. Tas ir, lai izvairītos no parādības 1,2 * 1,2 = 1,44. Piemēram, ja jūs deklarējat fonta lielumu 1.2em #content, tad, deklarējot fonta lielumu p, tas var būt tikai 1em, nevis 1.2em, jo šis em nav tas em, un tas kļūst par 1em=12px, jo tas manto fonta augstumu #content. REM funkcijas rem ir jauna relatīvā vienība (saknes em), kas pievienota CSS3, kas ir piesaistījusi lielu uzmanību. Kāda ir atšķirība starp šo vienību un em? Atšķirība ir tāda, ka, izmantojot rem, lai iestatītu elementa fonta lielumu, tas joprojām ir relatīvais lielums, bet relatīvais ir tikai HTML saknes elements. Var teikt, ka šī vienība apvieno relatīvā lieluma un absolūtā lieluma priekšrocības, ar kuru palīdzību tā var ne tikai modificēt tikai saknes elementu, lai proporcionāli pielāgotu visus fontu izmērus, bet arī izvairīties no ķēdes reakcijas, saliekot fontu izmērus slāni pa slānim. Pašlaik rem tiek atbalstīts visās pārlūkprogrammās, izņemot IE8 un agrāk. Pārlūkprogrammām, kas to neatbalsta, atbilde ir arī ļoti vienkārša, proti, uzrakstīt absolūtu vienības paziņojumu. Šīs pārlūkprogrammas ignorē fonta lielumu, kas iestatīts ar rem. Tālāk ir sniegts piemērs. p {fonta izmērs:14px; fonta izmērs:.875rem; } Piezīme:Fontu vienību izvēle lielā mērā ir atkarīga no jūsu projekta, un, ja jūsu lietotāju bāze izmanto jaunāko pārlūkprogrammas versiju, tad REM ir ieteicams, ja saderība rada bažas, tad izmantojiet px vai abus. Šeit ir px, em, rem vienības konvertēšanas rīka adrese:http://pxtoem.com/
| 
Publicēts 21.03.2017 09:31:50
|
|
|
