Tool.cpu.
com.cn
在线开发工具
程序员教程
HTML/CSS
Bootstrap 教程
Bootstrap4 教程
CSS 教程
CSS3 教程
HTML 教程
HTML5教程
JavaScript
Ajax 教程
Google 地图 API 教程
JavaScript 参考手册
jQuery EasyUI 教程
jQuery 教程
JSON 教程
Vue.js 教程
Javascript 教程
后端语言
C 教程
C++ 教程
Go 语言教程
Java 教程
Node.js 教程
PHP 教程
Python 3 教程
Scala 教程
数据库
Memcached 教程
MongoDB 教程
MySQL 教程
Redis 教程
SQL 教程
SQLite 教程
移动开发
Android 教程
ionic 教程
iOS 教程
服务器相关
Docker 教程
Linux 教程
开发工具
Eclipse 教程
SVN 教程
网站建设
HTTP 教程
W3C 教程
XML教程
XLink 教程
XML DOM 教程
XML 教程
图形图像工具
文字处理工具
HTML 参考手册
HTML 标签列表(字母排序)
HTML 标签列表（功能排序）
HTML 全局属性
HTML 事件
HTML 画布
HTML 音频/视频
HTML 有效DOCTYPES
HTML 颜色名
HTML 拾色器
HTML 颜色混搭
HTML 字符集
HTML ASCII
HTML ISO-8859-1
HTML 符号
HTML URL 编码
HTML 语言代码
HTTP 消息
HTTP 方法
Px/Em 换算工具
键盘快捷键
HTML 标签
-
</a> </li> <li class=""> <a href="/jiaocheng/co-1055.html"> <img></a> </li> <li class=""> <a href="/jiaocheng/co-1056.html"> <input></a> </li> <li class=""> <a href="/jiaocheng/co-1057.html"> <ins></a> </li> <li class=""> <a href="/jiaocheng/co-1058.html"> <kbd></a> </li> <li class=""> <a href="/jiaocheng/co-1059.html"> <keygen></a> </li> <li class=""> <a href="/jiaocheng/co-1060.html"> <label></a> </li> <li class=""> <a href="/jiaocheng/co-1061.html"> <legend></a> </li> <li class=""> <a href="/jiaocheng/co-1062.html"> <li></a> </li> <li class=""> <a href="/jiaocheng/co-1063.html"> <link></a> </li> <li class=""> <a href="/jiaocheng/co-1064.html"><main></a> </li> <li class=""> <a href="/jiaocheng/co-1065.html"> <map></a> </li> <li class=""> <a href="/jiaocheng/co-1066.html"> <mark></a> </li> <li class=""> <a href="/jiaocheng/co-1067.html"> <menu></a> </li> <li class=""> <a href="/jiaocheng/co-1068.html"> <meta></a> </li> <li class=""> <a href="/jiaocheng/co-1069.html"> <meter></a> </li> <li class=""> <a href="/jiaocheng/co-1070.html"> <nav></a> </li> <li class=""> <a href="/jiaocheng/co-1071.html"> <noframes></a> </li> <li class=""> <a href="/jiaocheng/co-1072.html"> <noscript></a> </li> <li class=""> <a href="/jiaocheng/co-1073.html"> <object></a> </li> <li class=""> <a href="/jiaocheng/co-1074.html"> <ol></a> </li> <li class=""> <a href="/jiaocheng/co-1075.html"> <optgroup></a> </li> <li class=""> <a href="/jiaocheng/co-1076.html"> <option></a> </li> <li class=""> <a href="/jiaocheng/co-1077.html"> <output></a> </li> <li class=""> <a href="/jiaocheng/co-1078.html"> <p></a> </li> <li class=""> <a href="/jiaocheng/co-1079.html"> <param></a> </li> <li class=""> <a href="/jiaocheng/co-1080.html"> <pre></a> </li> <li class=""> <a href="/jiaocheng/co-1081.html"> <html></a> </li> <li class=""> <a href="/jiaocheng/co-1082.html"><picture></a> </li> <li class=""> <a href="/jiaocheng/co-1083.html">progress</a> </li> <li class=""> <a href="/jiaocheng/co-1084.html">q </a> </li> <li class=""> <a href="/jiaocheng/co-1085.html"> <rp></a> </li> <li class=""> <a href="/jiaocheng/co-1086.html"> <rt></a> </li> <li class=""> <a href="/jiaocheng/co-1087.html"> <ruby></a> </li> <li class=""> <a href="/jiaocheng/co-1088.html"> <s></a> </li> <li class=""> <a href="/jiaocheng/co-1089.html"> <samp></a> </li> <li class=""> <a href="/jiaocheng/co-1090.html"><script> </a> </li> <li class=""> <a href="/jiaocheng/co-1091.html"> <section></a> </li> <li class=""> <a href="/jiaocheng/co-1092.html"> <select></a> </li> <li class=""> <a href="/jiaocheng/co-1093.html"> <small></a> </li> <li class=""> <a href="/jiaocheng/co-1094.html"> <source></a> </li> <li class=""> <a href="/jiaocheng/co-1095.html"> <span></a> </li> <li class=""> <a href="/jiaocheng/co-1096.html"> <strike></a> </li> <li class=""> <a href="/jiaocheng/co-1097.html"> <strong></a> </li> <li class=""> <a href="/jiaocheng/co-1098.html"> <style></a> </li> <li class=""> <a href="/jiaocheng/co-1099.html"> <sub></a> </li> <li class=""> <a href="/jiaocheng/co-1100.html"> <summary></a> </li> <li class=""> <a href="/jiaocheng/co-1101.html"> <sup></a> </li> <li class=""> <a href="/jiaocheng/co-1102.html"> <table></a> </li> <li class=""> <a href="/jiaocheng/co-1103.html"> <tbody></a> </li> <li class=""> <a href="/jiaocheng/co-1104.html"> <td></a> </li> <li class=""> <a href="/jiaocheng/co-1105.html"> <textarea></a> </li> <li class=""> <a href="/jiaocheng/co-1106.html"> <tfoot></a> </li> <li class=""> <a href="/jiaocheng/co-1107.html"> <th></a> </li> <li class=""> <a href="/jiaocheng/co-1108.html"> <thead></a> </li> <li class=""> <a href="/jiaocheng/co-1109.html"> <time></a> </li> <li class=""> <a href="/jiaocheng/co-1110.html"> <title></a> </li> <li class=""> <a href="/jiaocheng/co-1111.html"> <tr></a> </li> <li class=""> <a href="/jiaocheng/co-1112.html"> <track></a> </li> <li class=""> <a href="/jiaocheng/co-1113.html"> <tt></a> </li> <li class=""> <a href="/jiaocheng/co-1114.html"> <u></a> </li> <li class=""> <a href="/jiaocheng/co-1115.html"> <ul></a> </li> <li class=""> <a href="/jiaocheng/co-1116.html"> <var></a> </li> <li class=""> <a href="/jiaocheng/co-1117.html"> <video></a> </li> <li class=""> <a href="/jiaocheng/co-1118.html"> <wbr></a> </li> </ul> </div> <!-- 中间内容--> <div id='write' class='is-node'> <h1 class="border-b-none"><a name="" class="md-header-anchor"></a><span> Px/Em 换算工具 </span></h1> <div class="pre-and-next"> <a href="co-996.html">上一篇： HTTP 方法</a> <a href="co-998.html" >下一篇： 键盘快捷键 </a> </div> <div class="article-intro" id="content"><p>以下工具提供了em和px的换算工具。</p><ul> <li>第一个输入框：设置了网页默认的字体像素 (通常 16px)</li> <li>第二个输入框：输入像素值，可以将 px 换算为 em。</li> <li>第三个输入框：输入em（相对长度单位）值，可以将 em 换算为 px。</li> </ul><blockquote> <p>设置默认的像素大小:</p> <input class="conv" id="pix1" size="8" type="text" value="16"/> <span style="font-size:23px">px</span> <br/><br/> <p class="pxem"> PX 换算为 EM:<br/> <input class="conv" id="myInput" onblur="works()" onfocus="wrong()" size="8" type="text" value=""/> <span style="font-size:23px">px</span> </p> <p class="empx">EM 换算为 PX:<br/> <input class="conv" id="myInput2" onblur="works2()" onfocus="wrong2()" size="8" type="text" value=""/> <span style="font-size:23px">em</span> </p> <p class="clearfix"></p> <button class="btn example-btn" onclick="myFunction()"> 转换</button> <hr/> <p>换算结果: <span id="result1" style="font-size:24px"></span></p> <br/> </blockquote><hr/><h2>文本字体大小</h2><p>下表列出了在网页字体默认值为 16px 时， px 和 em 及网页字体百分比的换算数据。</p><div id="demo"></div><hr/><h2>相关文章</h2><ul><li> <a href="co-4306.html" target="_blank" title="px,pt,em换算表">px,pt,em换算表</a></li><li> <a href="co-4307.html" target="_blank" title="px、em、rem区别介绍">px、em、rem区别介绍</a></li><li> <script> function fillTable(x) { var t = ""; t = t + "<table style='cursor:pointer;' class='reference'>" t = t + "<tr>" t = t + "<th style='cursor:auto;width:33%;font-weight:bold;'>px</th>" t = t + "<th style='cursor:auto;width:33%;font-weight:bold;'>em</th>" t = t + "<th style='cursor:auto;width:33%;font-weight:bold;'>百分比</th>" t = t + "</tr>" for (i = 5; i < 26; i++) { t = t + "<tr onclick='fillTable(" + i + ")')'" if (i == x) { t = t + " style='background-color:#555;color:white;' " } t = t + "><td>" + i + "px</td>" t = t + "<td>" + (i/x).toFixed(4) + "em</td>" t = t + "<td>" + ((i/x) * 100).toFixed(2) + "%</td>" t = t + "</tr>" } t = t + "</table>"; document.getElementById("demo").innerHTML = t; } fillTable(16); function wrong() { document.getElementById("myInput2").disabled = true; document.getElementById("myInput2").value = ""; } function wrong2() { document.getElementById("myInput").disabled = true; document.getElementById("myInput").value = ""; } function works() { document.getElementById("myInput2").disabled = false; document.getElementById("myInput2").value = ""; } function works2() { document.getElementById("myInput").disabled = false; document.getElementById("myInput").value = ""; } function myFunction() { var x = document.getElementById("myInput").value; var z = document.getElementById("myInput2").value; var y = document.getElementById("pix1").value; var res = document.getElementById("result1"); if (x) { res.innerHTML = x/y + "em"; } else { res.innerHTML = z*y + "px"; } if (isNaN (x) || isNaN (z) || isNaN (y)) { res.innerHTML = "请输入数字！"; res.style.color = "red"; } else { res.style.color = "black"; } } </script> </li></ul></div> <div class="pre-and-next"> <a href="co-996.html">上一篇： HTTP 方法</a> <a href="co-998.html" >下一篇： 键盘快捷键 </a> </div> </div> <!-- 右侧列表 --><div class="right-nav-con" id="rightNavCon"> <ul id="rightNavList"> <li><strong>分类导航</strong></li> <li data-type="dropdown"> <a href="javascript:;">HTML/CSS <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/bootstrap/" class="">Bootstrap 教程</a></dd> <dd><a href="/jiaocheng/bootstrap4/" class="">Bootstrap4 教程</a></dd> <dd><a href="/jiaocheng/css/" class="">CSS 教程</a></dd> <dd><a href="/jiaocheng/css3/" class="">CSS3 教程</a></dd> <dd><a href="/jiaocheng/html/" class="">HTML 教程</a></dd> <dd><a href="/jiaocheng/html5jc/" class="">HTML5教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">JavaScript <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/ajax/" class="">Ajax 教程</a></dd> <dd><a href="/jiaocheng/googleapi/" class="">Google 地图 API 教程</a></dd> <dd><a href="/jiaocheng/jsref/" class="">JavaScript 参考手册</a></dd> <dd><a href="/jiaocheng/jeasyui/" class="">jQuery EasyUI 教程</a></dd> <dd><a href="/jiaocheng/jquery/" class="">jQuery 教程</a></dd> <dd><a href="/jiaocheng/json_t/" class="">JSON 教程</a></dd> <dd><a href="/jiaocheng/vue2/" class="">Vue.js 教程</a></dd> <dd><a href="/jiaocheng/js/" class="">Javascript 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">后端语言 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/cprogramming/" class="">C 教程</a></dd> <dd><a href="/jiaocheng/cplusplus/" class="">C++ 教程</a></dd> <dd><a href="/jiaocheng/go/" class="">Go 语言教程</a></dd> <dd><a href="/jiaocheng/java/" class="">Java 教程</a></dd> <dd><a href="/jiaocheng/nodejs/" class="">Node.js 教程</a></dd> <dd><a href="/jiaocheng/php/" class="">PHP 教程</a></dd> <dd><a href="/jiaocheng/python3/" class="">Python 3 教程</a></dd> <dd><a href="/jiaocheng/scala/" class="">Scala 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">数据库 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/memcached/" class="">Memcached 教程</a></dd> <dd><a href="/jiaocheng/mongodb/" class="">MongoDB 教程</a></dd> <dd><a href="/jiaocheng/mysql/" class="">MySQL 教程</a></dd> <dd><a href="/jiaocheng/redis/" class="">Redis 教程</a></dd> <dd><a href="/jiaocheng/sql/" class="">SQL 教程</a></dd> <dd><a href="/jiaocheng/sqlite/" class="">SQLite 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">移动开发 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/android/" class="">Android 教程</a></dd> <dd><a href="/jiaocheng/ionic/" class="">ionic 教程</a></dd> <dd><a href="/jiaocheng/ios/" class="">iOS 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">服务器相关 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/docker/" class="">Docker 教程</a></dd> <dd><a href="/jiaocheng/linux/" class="">Linux 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">开发工具 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/eclipse/" class="">Eclipse 教程</a></dd> <dd><a href="/jiaocheng/svn/" class="">SVN 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">网站建设 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/htpjc/" class="">HTTP 教程</a></dd> <dd><a href="/jiaocheng/w3c/" class="">W3C 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">XML教程 <!-- <i class="custom-icon-12 custom-icon-toparrow-bf opacity-5"></i>--> <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/xlink/" class="">XLink 教程</a></dd> <dd><a href="/jiaocheng/dom/" class="">XML DOM 教程</a></dd> <dd><a href="/jiaocheng/xml/" class="">XML 教程</a></dd> </dl> </li> </ul> </div> </div><!-- 底部 --> <!-- 底部 --> <footer class="relative b-large-margin"> <div class="container"> <div class="footer-gg-b"> <div class="footer-gg-b-addr"> <!-- 底部 广告--> </div> <div class="footer-gg-b-style"> <div class="footer-gg-b-link"> <a href="" class="footer-gg-b-email">联系我们</a> <a href="" class="footer-gg-b-feedback">问题反馈</a> </div> <p class="footer-gg-b-copy"><a href="https://beian.miit.gov.cn" target="_blank">鄂ICP备2023022218号-2</a> ©2023 CPU.COM.CN ALL RIGHT RESERVED</p></div> </div> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js?id=JtK9htQUws8UhD7i&ck=JtK9htQUws8UhD7i&autoTrack=true"></script><script type="text/javascript" src="https://js.users.51.la/21804545.js"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js?id=K079qR6lFQ4UNH67&ck=K079qR6lFQ4UNH67"></script> </div></footer> <div class="xf-window"> <div class="xf-wxewm" id="showQrcode"> <i class="fa fa-qrcode icon icon-qrcode "></i> <div class="xf-qrcode" id="wxQrcode"> <p>用微信扫一扫</p> <img src="/static/202010/img/gzh_wechat.jpg" width="150"> </div> </div> <a class="fa fa-star xf-collection"> 收藏 </a> <div class="fa fa-qq xf-share " id="showQqlist"> <div class="xf-qrcode xf-qq-link " id="qqWindow" style="display: none"> <p class="xf-qq-link-tit">CPU中文网交流群</p> <p><span>QQ群：</span></p> <a target="_blank" href="">点击加入群</a> <p><span>QQ客服：</span> </p> <p>(工作日: 9:00-18:00)</p> <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">点击联系客服</a> </div> </div> <a href="/feedback.html" class="fa fa-pencil xf-myfeed" target="_blank" id="feedBack"> </a> <div class="xf-totop" id="goTop"> <i class="fa fa-caret-up icon icon-caret-up"></i> </div> </div> <script src="/static/202010/js/lang.js"></script> <script src="/static/202010/js/login.js"></script> <script src="/static/202010/js/footer.js"></script> <style> .popup-link-info-box { position: absolute; right: 58px; top: 0; background-color: #fff; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); padding: 15px; display: none; } .popup-link-info-box li { float: left; margin-right: 10px; border: 1px solid #eee; text-align: center; line-height: 50px; } .popup-link-info-box li p { font-size: 14px; color: #333; } .popup-link-info-box li p span { font-size: 14px; color: #333; } .popup-link-info-box li .popup-wechat-wrapper {} .popup-link-info-box li .popup-wechat-wrapper img { height: 100%; width: 100%; object-fit: cover; } </style> <script type="text/javascript" src="/static/kj/js/jquery.js"></script> <script type="text/javascript" src="/static/kj/js/home-1589270335000-bundle.js"></script> <script type="text/javascript" src="/static/202010/js/jquery.cookie.js"></script> <script type="text/javascript" src="/static/kj/js/pre.js"></script> <script src="/static/202010/js/new-common.js"></script> <script> $(function () { //替换为 pre 标签 // $('.example_code').unwrap().wrap('<pre/>'); $('.example_code').find('br').remove() $('.example_code').replaceWith(function(){ return $("<pre />").append($(this).contents()); }); $("pre").addClass("prettyprint");//如果其他地方也要用到pre，我们可以再加一个父标签的选择器来区分 prettyPrint();//代替body上的onload事件加载该方法 $('a.tryitbtn').text('运行代码') //左导航高度 // var centHeight = $('.is-node').outerHeight() - 2 // $('.left-nav-container').height(centHeight) // $('.left-nav-container ul').height(centHeight - 36) // $('.right-nav-con').height(centHeight) }) $('#write').find('hr').remove() </script> </body> </html>