|
De flesta inhemska designers gillar att använda px, medan de flesta utländska webbplatser föredrar att använda em och rem, så vad är skillnaden mellan de tre, och vilka är för- och nackdelarna med var och en? Låt oss ge dig en detaljerad introduktion. PX-funktioner: 1. IE kan inte justera teckenstorleken på de som använder px som enhet; 2. Anledningen till att de flesta utländska webbplatser kan justeras är att de använder em eller rem som typsnittsenheter; 3. Firefox kan justera px, em och rem, men mer än 96 % av kinesiska nätanvändare använder IE-webbläsaren (eller kärnan). px pixlar. Relativa längdenheter. Pixel px är relativt till skärmens upplösning. (Citerat från CSS2.0-manualen) Em är en relativ längdenhet. Teckenstorlek i förhållande till texten inom det aktuella objektet. Om textens teckenstorlek i raden inte är konstgjort inställd, kommer den att vara relativ till webbläsarens standardteckenstorlek. (Citerat från CSS2.0-manualen) Standardnivån på teckensnittet för vilken webbläsare som helst är 16px. Alla ojusterade webbläsare följer: 1em=16px. Sedan 12px=0,75em, 10px=0,625em. För att förenkla konverteringen av teckenstorlek behöver du deklarera font-size=62,5% i brödtextväljaren i CSS, vilket gör em-värdet 16px*62,5%=10px, så att 12px=1,2em, 10px=1em, vilket betyder att du bara behöver dividera ditt ursprungliga px-värde med 10 och sedan ersätta det med em som enhet. EM-funktioner: 1. Värdet av dem är inte fast; 2. em ärver teckenstorleken på föräldraelementet. Så när vi skriver CSS måste vi vara uppmärksamma på två saker: 1. Deklarera font-size=62,5% i brödtextväljaren; 2. Dividera ditt ursprungliga px-värde med 10 och ersätt det med dem som enhet; 3. Beräkna om em-värdena för dessa förstorade typsnitt. Undvik upprepade deklarationer av teckenstorlek. Det vill säga, för att undvika fenomenet 1,2 * 1,2 = 1,44. Till exempel, om du deklarerar teckenstorleken 1,2em i #content, så kan teckenstorleken p, inte 1,2em, bara vara 1em, inte 1,2em, eftersom detta em inte är det em, och det blir 1em=12px eftersom det ärver teckenhöjden #content. REM-funktioner rem är en ny relativ enhet (rot-em) som lagts till CSS3, vilket har väckt mycket uppmärksamhet. Vad är skillnaden mellan denna enhet och EM? Skillnaden är att när du använder rem för att ställa in teckenstorleken för ett element, är det fortfarande relativstorleken, men relativstorleken är bara HTML-rotelementet. Denna enhet kan sägas kombinera fördelarna med relativ storlek och absolut storlek, vilket innebär att den inte bara kan modifiera rotelementet för att justera alla teckensnittsstorlekar proportionellt, utan också undvika kedjereaktionen av sammansatta teckensnittsstorlekar lager för lager. För närvarande stöds rem i alla webbläsare utom IE8 och tidigare. För webbläsare som inte stödjer det är svaret också mycket enkelt, vilket är att skriva en absolut enhetssats. Dessa webbläsare ignorerar teckenstorleken som är inställd med rem. Här är ett exempel: p {font-size:14px; font-size:.875rem; } Not:Valet av typsnittsenheter är till stor del upp till ditt projekt, och om din användarbas använder den senaste versionen av webbläsaren rekommenderas REM, om kompatibilitet är en oro, använd px, eller båda. Här är en adress för px, em, rem-enhetskonverteringsverktyg:http://pxtoem.com/
| 
Publicerad på 2017-03-21 09:31:50
|
|
|
