<!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. linux rpm -ivh MySQL-server-5.5.31-2.el6.i686.rpm

    linux rpm 安装mysql异常: [root@localhost upload]# rpm -ivh MySQL-server-5.5.31-2.el6.i686.rpmerror: Fail ...

  2. 第二章 NIO入门

    传统的同步阻塞式I/O编程 基于NIO的非阻塞编程 基于NIO2.0的异步非阻塞(AIO)编程 为什么要使用NIO编程 为什么选择Netty 第二章 NIO 入门 2.1 传统的BIO编程 2.1.1 ...

  3. asp.net 解决 "回发或回调参数无效" 一些常见解决方案

    一.回发或回调参数无效,出现下图错误, 常见解决方案: 1.在页面的<%@ Page Language="C#"  AutoEventWireup="true&qu ...

  4. 无法启动xwindow

    1 新建一个lqx用户,执行startx命令出现: Fatal server error: PAM authentication failed, cannot start X server. perh ...

  5. 突破php的imagecopyresampled 和imagecopyresized 实现图片马JPG

    编辑器加载中...之前有人发布了 利用PNG 图片上述压缩函数的方法 原理利用 PNG的结构IDAT chunks填充一句话webshell,并进行一套取模运算 详见: https://www.ido ...

  6. 转载：《TypeScript 中文入门教程》

    缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻 ...

  7. java 简单数组元素的增删改查

    public class Test { static int[] a = new int[20]; static int n; public static void main(String[] arg ...

  8. 转，Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  9. Spring MVC常用注解

    cp by http://www.cnblogs.com/leskang/p/5445698.html 1.@Controller 在SpringMVC 中,控制器Controller 负责处理由Di ...

  10. NoSQL生态系统——一致性RWN协议，向量时钟，gossip协议监测故障

    13.5 一致性 在NoSQL中,通常有两个层次的一致性:第一种是强一致性,既集群中的所有机器状态同步保持一致.第二种是最终一致性,既可以允许短暂的数据不一致,但数据最终会保持一致.我们先来讲一下,在 ...