ѧϰCSSÁ˽ⵥλemºÍpxµÄÇø±ð
ÔÚ¹úÄÚÍøÕ¾ÖУ¬°üÀ¨Èý´óÃÅ»§£¬ÒÔ¼°“ÒýÁì”ÖйúÍøÕ¾Éè¼Æ³±Á÷µÄÀ¶É«ÀíÏ룬ChinaUIµÈ¶¼ÊÇʹÓÃÁËpx×÷Ϊ×ÖÌ嵥λ¡£Ö»ÓаٶȺôõ×öÁ˸ö¿Éµ÷µÄ±íÂÊ¡£¶øÔÚ´óÑó±Ë°¶£¬¼¸ºõËùÓеÄÖ÷Á÷Õ¾µã¶¼Ê¹ÓÃem×÷Ϊ×ÖÌ嵥룬Ҳ¾ÍÊǿɵ÷µÄ¡£Ã»´í£¬px±Èem¸ü¼ÓÈÝÒ×ʹÓ㬴󲿷ֶÁÕß²»ÖªµÀemΪºÎÎï»òÕßËüÏ൱ÓÚ¶àÉÙpx¡£¹úÍâÈËÊ¿Èç´ËÖØÊÓÍøÕ¾Ò×ÓÃÐÔ(Accessibility)£¬²»½öÒòΪÆä¸ùÉúµÙ¹ÌµÄÈËÎľ«Éñ£¬Ö±½ÓÔÒò¿ÉÄÜÊÇÒòΪÓÐÒ»²¿·¨ÂÉÀ´Ô¼ÊøËûÃÇ—ÀýÈçÃÀ¹úµÄSection 508£¬Ç¿ÖÆÍøÕ¾´ïµ½Ò»¶¨µÄÒ×ÓÃÐÔ¡£
¹Ø¼üµã£º
¡¡¡¡1. IEÎÞ·¨µ÷ÕûÄÇЩʹÓÃpx×÷Ϊµ¥Î»µÄ×ÖÌå´óС;
¡¡¡¡2. ¹úÍâµÄ´ó²¿·ÖÍøÕ¾Äܹ»µ÷ÕûµÄÔÒòÔÚÓÚÆäʹÓÃÁËem×÷Ϊ×ÖÌ嵥λ;
¡¡¡¡3. FirefoxÄܹ»µ÷ÕûpxºÍem£¬µ«ÊÇ96%ÒÔÉϵÄÖйúÍøÃñʹÓÃIEä¯ÀÀÆ÷(»òÄÚºË)¡£
¡¡¡¡pxÏñËØ(Pixel)¡£Ïà¶Ô³¤¶Èµ¥Î»¡£ÏñËØpxÊÇÏà¶ÔÓÚÏÔʾÆ÷ÆÁÄ»·Ö±æÂʶøÑԵġ£
¡¡¡¡emÊÇÏà¶Ô³¤¶Èµ¥Î»¡£Ïà¶ÔÓÚµ±Ç°¶ÔÏóÄÚÎı¾µÄ×ÖÌå³ß´ç¡£È統ǰ¶ÔÐÐÄÚÎı¾µÄ×ÖÌå³ß´çδ±»ÈËΪÉèÖã¬ÔòÏà¶ÔÓÚä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå³ß´ç¡£
¡¡¡¡ÈÎÒâä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå¸ß¶¼ÊÇ16px¡£ËùÓÐδ¾µ÷ÕûµÄä¯ÀÀÆ÷¶¼·ûºÏ: 1em=16px¡£ÄÇô12px=0.75em,10px=0.625em¡£ÎªÁ˼ò»¯font-sizeµÄ»»Ë㣬ÐèÒªÔÚcssÖеÄbodyÑ¡ÔñÆ÷ÖÐÉùÃ÷Font-size=62.5%£¬Õâ¾ÍʹemÖµ±äΪ 16px*62.5%=10px, ÕâÑù12px=1.2em, 10px=1em, Ò²¾ÍÊÇ˵ֻÐèÒª½«ÄãµÄÔÀ´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»¾ÍÐÐÁË¡£
¡¡¡¡emÓÐÈçÏÂÌØµã£º
¡¡¡¡1. emµÄÖµ²¢²»Êǹ̶¨µÄ;
¡¡¡¡2. em»á¼Ì³Ð¸¸¼¶ÔªËصÄ×ÖÌå´óС¡£
¡¡¡¡ËùÒÔÎÒÃÇÔÚдCSSµÄʱºò£¬ÐèҪעÒâÁ½µã£º
¡¡¡¡1. bodyÑ¡ÔñÆ÷ÖÐÉùÃ÷Font-size=62.5%;
¡¡¡¡2. ½«ÄãµÄÔÀ´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»;
¡¡¡¡3. ÖØÐ¼ÆËãÄÇЩ±»·Å´óµÄ×ÖÌåµÄemÊýÖµ¡£±ÜÃâ×ÖÌå´óСµÄÖØ¸´ÉùÃ÷¡£
¡¡¡¡Ò²¾ÍÊDZÜÃâ1.2 * 1.2= 1.44µÄÏÖÏó¡£±ÈÈç˵ÄãÔÚ#contentÖÐÉùÃ÷ÁË×ÖÌå´óСΪ1.2em£¬ÄÇôÔÚÉùÃ÷pµÄ×ÖÌå´óСʱ¾ÍÖ»ÄÜÊÇ1em£¬¶ø²»ÊÇ1.2em, ÒòΪ´Ëem·Ç±Ëem£¬ËüÒò¼Ì³Ð#contentµÄ×ÖÌå¸ß¶ø±äΪÁË1em=12px¡£
¡¡¡¡µ«ÊÇ12pxºº×ÖÀýÍ⣬¾ÍÊÇÓÉÒÔÉÏ·½·¨µÃµ½µÄ12px(1.2em)´óСµÄºº×ÖÔÚIEÖв¢²»µÈÓÚÖ±½ÓÓÃ12px¶¨ÒåµÄ×ÖÌå´óС£¬¶øÊÇÉÔ´óÒ»µã¡£Õâ¸öÎÊÌâ JoruxÒѾ½â¾ö£¬Ö»ÐèÔÚbodyÑ¡ÔñÆ÷ÖаÑ62.5%»»³É63%¾ÍÄÜÕý³£ÏÔʾÁË¡£ÔÒò¿ÉÄÜÊÇIE´¦Àíºº×Öʱ£¬¶ÔÓÚ¸¡µãµÄȡֵ¾«È·¶ÈÓÐÏÞ¡£²»ÖªµÀÓÐûÓÐÆäËûµÄ½âÊÍ¡£
×ÊÁÏÒýÓÃ:http://www.knowsky.com/348005.html
Ïà¹ØÎĵµ£º
°æÈ¨ÉùÃ÷£ºÔ´´×÷Æ·£¬ÔÊÐí×ªÔØ£¬×ªÔØÊ±ÇëÎñ±ØÒÔ³¬Á´½ÓÐÎʽ±êÃ÷ÎÄÕÂÔʼ³ö°æ¡¢×÷ÕßÐÅÏ¢ºÍ±¾ÉùÃ÷¡£·ñÔò½«×·¾¿·¨ÂÉÔðÈΡ£http://blog.csdn.net/mayongzhan - ÂíÓÀÕ¼,myz,mayongzhan
Êé½ÓÉϻأ¬ÉÏ´Î˵µ½Ï´θüÐÂÊǺܾúܾÃÖ®ºóµÄÊ£¬¹û²»ÆäÈ»£¬È·ÊµÊǾÃÁËÒ»µã£¬Ò²Õý˵Ã÷csdnÔÚÎȶ¨ÖÐǰ½ø¡£½ñÌì·¢ÏÖÔÀ´ÔÚ²©¿ÍÓÒÏÂµÄ¹ã¸æ¿ò£¬ÏÖÔ ......
ÔÎÄ´«ËÍÃÅ£ºhttp://blog.csdn.net/dux003/archive/2009/11/08/4786371.aspx
csdn blog css×Ô¶¨ÒåÉèÖÃ
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_conten ......
¶ÔDIV+CSSż»¹ÊÇÐÂÊÖ,ËùÒÔ¶ÔIDÓëCLASSÖ®¼äµÄÇø±ð,żµ½½ñÌìÒ²»¹ÊÇÓÐЩÐíÃÔã,¸Õ²Å²éÁËÏÂÏà¹Ø×ÊÁÏ,¹ûÈ»¸øÅ¼Ö¸Ã÷ÁË·½Ïò,ÏÂÃæÊÇËüÃÇÖ®¼äµÄÇø±ðÀ´×ÔÍøÉÏÄÚÈÝÎÒ°ÑËüÊÕ²ØÁ˽øÀ´,ÒÔ±ã²Î¿¼: ¡¡ ¡¡¡¡
Ò»¡¢ÔÚweb±ê×¼ÖÐÊDz»ÈÝÐíÖØ¸´IDµÄ£¬ÀýÈç div id="a" ²»ÈÝÐíÖØ¸´2´Î£»¶øclassËù¶¨ÒåµÄÊÇÀ࣬ÀíÂÛÉÏ¿ÉÒÔÎÞÏÞÖØ¸´¡£ÒÔ¸ù¾ÝÐèÒª¶à´ÎÒýÓà ......