px\u7edd\u5bf9\u503c\uff1a<\/p>\n
- \n
- \u5c06\u6587\u672c\u8bbe\u7f6e\u4e3a\u6307\u5b9a\u7684\u5927\u5c0f<\/li>\n
- \u4e0d\u5141\u8bb8\u7528\u6237\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e2d\u6539\u53d8\u6587\u672c\u5927\u5c0f\uff08\u4e0d\u5229\u4e8e\u53ef\u7528\u6027\uff09<\/li>\n
- \u7edd\u5bf9\u5927\u5c0f\u5728\u786e\u5b9a\u4e86\u8f93\u51fa\u7684\u7269\u7406\u5c3a\u5bf8\u65f6\u5f88\u6709\u7528<\/li>\n<\/ul>\n
em\u76f8\u5bf9\u5927\u5c0f\uff1a<\/p>\n
- \n
- \u76f8\u5bf9\u4e8e\u5468\u56f4\u7684\u5143\u7d20\u6765\u8bbe\u7f6e\u5927\u5c0f<\/li>\n
- \u5141\u8bb8\u7528\u6237\u5728\u6d4f\u89c8\u5668\u6539\u53d8\u6587\u672c\u5927\u5c0f<\/li>\n<\/ul>\n<\/div>\n
\u4efb\u610f\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u5b57\u4f53\u9ad8\u90fd\u662f16px\u3002\u6240\u4ee5\u672a\u7ecf\u8c03\u6574\u7684\u6d4f\u89c8\u5668\u90fd\u7b26\u5408: 1em=16px\u3002\u90a3\u4e4812px=0.75em, 10px=0.625em\u3002<\/p>\n
\u4e3a\u4e86\u7b80\u5316\u8ba1\u7b97\uff0c\u5728css\u4e2d\u7684body\u9009\u62e9\u5668\u4e2d\u58f0\u660eFont-size=62.5%\uff0c\u8fd9\u5c31\u4f7fem\u503c\u53d8\u4e3a16px*62.5%=10px, \u8fd9\u683712px=1.2em, 10px=1em, \u4e5f\u5c31\u662f\u8bf4\u53ea\u9700\u8981\u5c06\u4f60\u7684\u539f\u6765\u7684px\u6570\u503c\u9664\u4ee510\uff0c\u7136\u540e\u6362\u4e0aem\u4f5c\u4e3a\u5355\u4f4d\u5c31\u884c\u4e86\u3002<\/p>\n
\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n
\n<\/a><\/div>\n
<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml<\/a>“>
\n<head>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″ \/>
\n<style>
\nbody{Font-size:62.5%}
\n.div_px{font-size:10px; border:1px red solid;width:120px; height:20px}
\n.div_em{font-size:1em; border:0.1em red solid;width:12em; height:2em}<\/p>\n<\/style>
\n<\/head><\/p>\n<body>
\n<div class=”div_px” >1\u3001\u8fd9\u91cc\u662fdiv_px<\/div><br\/><\/p>\n<div class=”div_em” >2\u3001\u8fd9\u91cc\u662fdiv_em<\/div><br\/><\/p>\n
<br\/><\/body>
\n<\/html><\/p>\n\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n
![\"1\"](\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2014\/01\/1.jpg\")
<\/a><\/p>\n\u8fd9\u4e24\u4e2adiv\u57fa\u672c\u662f\u4e00\u6837\u7684\u3002<\/p>\n
<\/p>\n
\u4f46\u662f\uff0c\u5982\u679c\u4ec5\u4ec5\u662f\u8fd9\u6837\uff0c\u90a3\u5c31\u597d\u529e\u4e86\u3002\u76f4\u63a5\u66ff\u6362\u5c31\u597d\u4e86\u3002<\/p>\n
\u2018em\u4f1a\u7ee7\u627f\u7236\u7ea7\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u2019\u8fd9\u6761\uff0c\u8981\u4e86\u4eb2\u547d\u4e86\u3002\u3002\u3002<\/p>\n
\u6bd4\u5982\u8fd9\u6837\u7684\u4e00\u4e2a\u9875\u9762\uff1a<\/p>\n
\n<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml<\/a>“>
\n<head>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″ \/>
\n<title>\u65e0\u6807\u9898\u6587\u6863<\/title>
\n<style>
\nbody{Font-size:62.5%}<\/p>\n.div_out{font-size:1em; border:1px red solid;width:12em; height:4em }
\n.div_in{ font-size:1em; border:1px blue solid;width:12em; height:4em }
\n<\/style>
\n<\/head><\/p>\n<body><\/p>\n
<div class=”div_out” >
\n3\u3001\u8fd9\u662fdiv_out
\n<div class=”div_in” >
\n4\u3001\u8fd9\u662fdiv_in
\n<\/div>
\n<\/div>
\n<br\/><br\/><br\/><br\/><br\/><br\/><br\/><br\/>
\n<div class=”div_in” >
\n5\u3001\u8fd9\u662f\u5728\u5916\u9762\u7684div_in
\n<\/div><\/p>\n<\/body>
\n<\/html><\/p>\n\u8fd9\u91cc\u67093\u4e2adiv\uff0c3\u548c4\u662f\u5957\u5728\u4e00\u8d77\u7684\uff0c5\u662f\u4f5c\u5bf9\u6bd4\u7684\u3002<\/p>\n
\u73b0\u5728\u7684\u6548\u679c\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n
![\"2\"](\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2014\/01\/2.jpg\")
<\/a><\/p>\n\u6069\uff0c\u770b\u8d77\u6765\u8fd9\u51e0\u4e2adiv\u6548\u679c\u662f\u4e00\u6837\u7684\uff0cdiv_out\u548cdiv_in\u7684\u8bbe\u5b9a\uff0cfont-size\u90fd\u662f1em\uff0c\u6240\u4ee5\u7ee7\u627f\u6ca1\u6709\u8868\u73b0\u51fa\u6765\u3002<\/p>\n
\u901a\u8fc7\u68c0\u6d4b\uff0c3\u548c4\u7684\u5b57\u4f53\u90fd\u662f10px\uff0c\u957f\u5ea6\u90fd\u662f122px\uff0c\u5bbd\u5ea6\u90fd\u662f42px\u3002\uff08\u8bbe\u7f6e\u4e86border\uff0c\u6240\u4ee5\u591a\u4e862px\uff09<\/p>\n
<\/p>\n
\u73b0\u5728\u6539\u4e00\u4e0b\uff1a<\/p>\n
.div_out{font-size:1.5em; border:1px red solid;width:12em; height:4em }<\/div>\n\u6548\u679c\u662f\u8fd9\u6837\u7684<\/p>\n
![\"3\"](\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2014\/01\/3.jpg\")
<\/a><\/p>\n![\"4\"](\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2014\/01\/4.jpg\")
<\/a>