<!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. JVM垃圾回收机制总结：调优方法

    转载: JVM垃圾回收机制总结:调优方法 JVM 优化经验总结 JVM 垃圾回收器工作原理及使用实例介绍

  2. csshover.htc CSS兼容

    以下为csshover.htc 内容 <attach event="ondocumentready" handler="parseStylesheets" ...

  3. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  4. hihoCoder挑战赛25

    萌新第一次打hihoCoder的比赛有点慌 T1 T1并不是特别难想到dp就好做了 显而易见的是一个01背包问题 Code: #include <cstdio> #include < ...

  5. 开发一个简单的python计算器

    要求: 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4* ...

  6. maven webjar构建及使用

    这么做的目的想要把前端静态文件,css啊js啊一堆的放在一个maven工程下管理,需要的时候调用jar包直接引用. 1.把要打包文件放到另外的maven项目的/src/main/resources下 ...

  7. jquery multiselect使用示例

    多选下拉框开源组件:https://github.com/ehynds/jquery-ui-multiselect-widget html部分: <select multiple id=&quo ...

  8. Android开发--ListView的应用

    1.简介 ListView用于以列表的形式展示数据.它在装载数据时,不能使用ListView类的add()等相关方法添加,而要借助Adapter对象进行添加.另外,由于 系统提供的Adapter往往不 ...

  9. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  10. ionic,angularJs实现搜索框过滤关键字

    利用AngularJS自带的过滤器,我们可以很方便的实现搜索框过滤的效果,但是怎么实现类似百度搜索过滤列表中关键字变色的效果呢? 页面上代码: <input type="text&qu ...