|
Useimmat kotimaiset suunnittelijat tykkäävät käyttää px:ää, kun taas useimmat ulkomaiset verkkosivustot käyttävät em:ää ja remiä, joten mikä on ero näiden kolmen välillä ja mitkä ovat kummankin edut ja haitat? Annetaan sinulle yksityiskohtainen esittely. PX:n ominaisuudet: 1. IE ei voi säätää niiden fonttikokoa, jotka käyttävät px:ää yksikkönä; 2. Syynä siihen, miksi useimpia ulkomaisia verkkosivustoja voidaan säätää, on se, että ne käyttävät em- tai rem-fonttiyksiköitä; 3. Firefox voi säätää px-, em- ja rem-asetuksia, mutta yli 96 % kiinalaisista nettikäyttäjistä käyttää IE-selainta (tai ydintä). PX Pixels. Suhteelliset pituusyksiköt. Pixel px on suhteessa näytön resoluutioon. (Lainaus CSS2.0-käyttöohjeesta) Em on suhteellinen pituusyksikkö. Fonttikoko suhteessa nykyisen objektin tekstiin. Jos rivin tekstin fonttikoko ei ole keinotekoisesti asetettu, se on suhteessa selaimen oletusfonttikokoon. (Lainaus CSS2.0-käyttöohjeesta) Oletusfontin korkeus mille tahansa selaimelle on 16px. Kaikki säätämättömät selaimet täyttävät vaatimukset: 1em=16px. Silloin 12px=0,75em, 10px=0,625em. Fonttikoon muunnoksen yksinkertaistamiseksi sinun täytyy ilmoittaa font-size=62,5% runkovalitsimessa css:ssä, jolloin em-arvo on 16px*62,5%=10px, eli 12px=1,2em, 10px=1em, eli tarvitsee vain jakaa alkuperäinen px-arvo kymmenellä ja korvata se em:llä yksikönä. EM-ominaisuudet: 1. Em:n arvo ei ole kiinteä; 2. EM perii vanhemman alkion fonttikoon. Kun kirjoitamme CSS:ää, meidän täytyy kiinnittää huomiota kahteen asiaan: 1. Ilmoita fonttikoko=62,5 % runkovalitsimessa; 2. Jaa alkuperäinen px-arvosi kymmenellä ja korvaa se yksikönä em; 3. Laske uudelleen näiden suurennettujen fonttien em-arvot. Vältä toistuvia fonttikoon ilmoituksia. Eli välttää ilmiö 1.2 * 1.2 = 1.44. Esimerkiksi, jos ilmoitat fonttikoon 1.2em #content:ssa, niin kun ilmoitat fonttikoon p:lle, se voi olla vain 1em, ei 1.2em, koska tämä em ei ole se em, ja siitä tulee 1em=12px, koska se perii fontin korkeuden #content. REM-ominaisuudet rem on uusi suhteellinen yksikkö (root em), joka on lisätty CSS3:een ja joka on herättänyt paljon huomiota. Mikä on ero tämän yksikön ja EM:n välillä? Ero on siinä, että kun käytät remiä asettaaksesi elementin fonttikoon, se on silti suhteellinen koko, mutta suhteellinen on vain HTML-juurielementti. Tämän yksikön voidaan sanoa yhdistävän suhteellisen koon ja absoluuttisen koon edut, joiden avulla se voi paitsi muuttaa juurielementtiä säätämään kaikkia fonttikokoja suhteellisesti, myös välttää ketjureaktion, jossa fonttikokoja yhdistetään kerros kerrokselta. Tällä hetkellä rem on tuettu kaikissa selaimissa paitsi IE8:ssa ja vanhemmissa versioissa. Selaimille, jotka eivät tue sitä, vastaus on myös hyvin yksinkertainen: kirjoittaa absoluuttinen yksikkölause. Nämä selaimet ohittavat rem-fonttikoon määritettyä fonttikokoa. Tässä esimerkki: p {font-size:14px; fonttikoko: .875rem; } Muistiinpano:Fonttiyksiköiden valinta on pitkälti projektisi päätettävissä, ja jos käyttäjäkuntasi käyttää selaimen uusinta versiota, REM-järjestelmä on suositeltavaa; jos yhteensopivuus on huolenaihe, käytä px:ää tai molempia. Tässä on px-, em- ja rem-yksikkömuunnostyökalun osoite:http://pxtoem.com/
| 
Julkaistu 21.3.2017 9.31.50
|
|
|
