<!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. appium案例

    import unittest from time import sleep from appium import webdriver import desired_capabilities clas ...

  2. python——django使用mysql数据库（一）

    之前已经写过如何创建一个django项目,现在我们已经有了一个小骷髅,要想这个web工程变成一个有血有肉的人,我们还需要做很多操作.现在就先来介绍如何在django中使用mysql数据库. 前提:已经 ...

  3. Python学习笔记之字典

    一.创建和使用字典 1.创建字典 phonebook={'Alice':'2341','Beth':'9102','Cecil':'3258'} 2.dict,通过映射创建字典 >>> ...

  4. poj 2732 Countdown（East Central North America 2005）

    题意:建一个家庭树,找出有第d代子孙的名字,按照要求的第d代子孙的数从大到小输出三个人名,如果有一样大小子孙数的,就按字母序从小到大将同等大小的都输出,如果小于三个人的就全输出. 题目链接:http: ...

  5. HTML 表单和输入<form><input>

    HTML <form> 标签 定义和用法: <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. ...

  6. 使用VS2012调试ReactOS源码

    目录 一 下载并安装VS2012 二 下载并安装WDK80 三 下载ReactOS0315源码 四 下载并安装RosBE211 五 用RosBE命令行编译ReactOS源码 六 用VS2012编译nt ...

  7. 将centos7打造成桌面系统

    前言以下所有操作默认在root权限下执行,桌面环境是kde,使用gnome的也可以参考一下.我收集的以下要用到的一些安装包,360网盘http://yunpan.cn/csMhBAp92vTgN 提取 ...

  8. Python函数参数学习笔记

    1.Python中函数参数类型可分为五种: f(x):x为位置参数: f(x,n=2):n为默认参数,调用时可以省略参数n,如f(5); f(*args):*args表示把args这个list或tup ...

  9. POJ 3176 Cow Bowling

    Cow Bowling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13016   Accepted: 8598 Desc ...

  10. 获取指定DLL程序集Config 文件

    /// <summary> /// 获取调用函数所在程序集的配置信息 /// </summary> /// <returns></returns> pr ...