ååºå¼ç½é¡µè®¾è®¡:remãem设置ç½é¡µåä½å¤§å°èªéåº
ãremãæ¯ææ ¹å
ç´ ï¼root elementï¼htmlï¼çåä½å¤§å°ï¼å¥½å¼å¿çæ¯ï¼ä»é¥è¿ç IE6 å°çæ¬å¸ Chrome ä»ä»¬é½çº¦å¥½äºï¼æ ¹å
ç´ é»è®¤ç font-size é½æ¯ 16pxãè¿æ ·ä¸ä¸ªæ°çåä½å
¼å®¹æ§å¦ä½å¢ï¼
IE9+ï¼FirefoxãChromeãSafariãOpera ç主æµçæ¬é½æ¯æäºï¼æå¯ä»¥æ¾èçä½¿ç¨ rem äºã
em ç计ç®æ¯åºäºç¶çº§å
ç´ çï¼å¨å®é
使ç¨ä¸ç»æ们ç计ç®å¸¦æ¥äºå¾å¤§çä¸ä¾¿ãæ以 rem çåºç°è§£æäºæè¿æ ·ä¸ä¼ç®æ¯ç人ï¼åä¹ä¸ç¨æ
å¿ç¶çº§å
ç´ ç font-size äºï¼å 为å®å§ç»æ¯åºäºæ ¹å
ç´ ï¼htmlï¼ çã
æ¯å¦é»è®¤ç html font-size=16pxï¼é£ä¹ææ³è®¾ç½®12px çæåå°±æ¯ï¼12÷16=0.75ï¼remï¼
å½ç¶ï¼ä½ å¯ä»¥å¼å
¥ CSS é¢å¤çå·¥å
·ï¼SassãLESS ãStylusçï¼èªå¨è®¡ç® rem å¼ï¼è¿éå°±ä¸ä¸ä¸ä¸¾ä¾äºã
ä½æ¯åæè¿æ ·çæ人æè
å¢éå¼åä¸è¿æ²¡æå¼å
¥ CSS é¢å¤çå·¥å
·ç该è¿ä¹åå¢ï¼åªè½æ¬ä¸ªè®¡ç®å¨åªåªåªäºåï¼å«æ¥ï¼ä½ è¿å¯ä»¥åéä¸ä¸ãæ们æ¹åä¸ä¸ html çé»è®¤ font-size=10px ä¸å°±å¥½è®¡ç®äºåï¼Like thisï¼
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
éè¦æ³¨æçæ¯ï¼ä¸ºäºå
¼å®¹ä¸æ¯æ rem çæµè§å¨ï¼æ们éè¦å¨ rem åé¢åä¸å¯¹åºç px å¼ï¼è¿æ ·ä¸æ¯æçæµè§å¨å¯ä»¥ä¼é
é级ãå
¶å®ä¸ç¨å¤ªçº ç»æ¯é»è®¤ç font-size:100%ï¼è¿æ¯è®¾ç½®ä¸º font-size:62.5%ï¼å¦æä½ å¼å
¥äº CSS é¢å¤çå·¥å
·é£ä¹èªç¶å¯ä»¥ä½¿ç¨é»è®¤å¼ï¼å¦æç±äºå
¶ä»åå ä½¿ç¨ font-size:62.5% ä¹æ å¯åéï¼å®å
¨å¯ä»¥å¨ body ä¸éç½®åä½ éè¦çé»è®¤ font-sizeã
温馨提示:答案为网友推荐,仅供参考