<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function convert (id) {
            var px_val = document.getElementById('pxToEm').value,
                em_val = document.getElementById('emToPX').value,
                base_val = document.getElementById('basePX').value;
            if(!base_val){
                document.getElementById('tip').value = '基本单位不能为空';
                return;
            }else{
                document.getElementById('tip').value = '';
            }
            base_val = base_val.replace(/[^0-9.]/g, '');
            if(id === 'PXtoEMConvert'){
                if(!px_val){
                    document.getElementById('tip').value = 'PX to EM不能为空';
                    return;
                }
                px_val = px_val.replace(/[^0-9.]/g, '');
                document.getElementById('tip').value = '';
                document.getElementById('result').value=((px_val / base_val).toFixed(3) + 'em');
            }else if(id === 'EMtoPXConvert'){
                if(!em_val){
                    document.getElementById('tip').value = 'EM to PX不能为空';
                    return ;
                }
                em_val = em_val.replace(/[^0-9.]/g, '');
                document.getElementById('tip').value = '';
                document.getElementById('result').value=(parseInt(em_val * base_val) + 'px');
            }
        }
    </script>
</head>
<body>
    <img src="px_em.png" alt="px和em单位相互转换">
    <br>
    <label for="basePx">基本单位:</label>
    <input type="number" id="basePX">px
    <br>
    <label for="pxToEm">PX to EM:</label>
    <input type="number" id="pxToEm">px
    <br>
    <label for="emToPX">EM to PX:</label>
    <input type="number" id="emToPX">em
    <br>
    <label for="result">转换结果:</label>
    <input type="text" id="result">
    <br>
    <input type="button" id="PXtoEMConvert" onclick="convert(this.id)" value="PX to EM转换">
    <input type="button" id="EMtoPXConvert" onclick="convert(this.id)" value="EM to PX转换">
    <br>
    <label for="tip">提示:</label>
    <input type="text" id="tip" readonly>
</body>
</html>
相关文章链接：
http://www.cnblogs.com/leejersey/p/3662612.html

em 和 px相互转换的更多相关文章

  1. em与px的区别 [ 转 ]

    其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...

  2. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  3. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  4. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  5. b1.关于em和px的关系

    一般默认 1em=12px ,  em相对于其父元素的px定义: 但是 如果本身元素设置 font-size: 15px;  em与px的比例随之变化. 一般根据浏览器默认的font-size:12p ...

  6. css单位em、px、rem和pt的区别

    1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...

  7. em与px区别-CSS教程

    在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...

  8. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  9. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

随机推荐

  1. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  2. Java Integer(-128~127)值的==和equals比较产生的思考

    最近在项目中遇到一个问题,两个值相同的Integer型值进行==比较时,发现Integer其中的一些奥秘,顺便也复习一下==和equals的区别,先通过Damo代码解释如下: System.out.p ...

  3. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  4. SHAREPOINT 2013 列表之间相互关联

    修改内容 1.增加列表设置,隐藏Aid字段操作 SharePoint 列表之间相互关联 例如两张列表之间的父子关系. 思路如下: 列表中新增列表项后会有一个唯一的ID,我们获取到该ID赋予子表即可将两 ...

  5. 学习PYTHON之路， DAY 7 - PYTHON 基础 7 (面向对象基础)

    面向对象三大特性 一.封装 封装,顾名思义就是将内容封装到某个地方,以后再去调用被封装在某处的内容. 所以,在使用面向对象的封装特性时,需要: 将内容封装到某处 从某处调用被封装的内容 第一步:将内容 ...

  6. php知识案列分享

    今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...

  7. iOS开发常用代码块（2）

    GCD定时器 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispa ...

  8. python【4】-函数

    一. 定义函数 定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回.如果没有return语句,函数执行完毕后也会返 ...

  9. Windows Store App JavaScript 开发：模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  10. Apache AB 如何传递参数

    AB使用时,网上通篇一律,在进行示例时使用的连接一般都是http://*.com,这种写法是没有带参数,如果你想测试一个写入的Case,那需要传递参数给后台,如何传递参数呢? 这里有一个登录的请求,需 ...