<!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. refactor window_x64微信小程序环境搭建

    所需文件地址如下: https://github.com/zsyzsy/weixinxiaochengxun   1.下载微信开发工具0.7.0_x64 安装完成后,打开程序,进行微信扫码登录 2.下 ...

  2. [HTML/HTML5]3 页面结构

    在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...

  3. git pull提示当前不在某个分支上

    $ git pull You are not currently on a branch, so I cannot use any 'branch.<branchname>.merge' ...

  4. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

  5. @Transactional 事务管理

    全面分析 Spring 的编程式事务管理及声明式事务管理 事务传播行为 所谓事务的传播行为是指,如果在开始当前事务之前,一个事务上下文已经存在,此时有若干选项可以指定一个事务性方法的执行行为.在Tra ...

  6. 转载：手机网页制作的认识（有关meta标签）

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  7. ios基础篇（二十一）—— UIImagePickerController类

    UIImagePickerController简述: UIImagePickerController 类是获取选择图片和视频的用户接口,我们可以用UIImagePickerController选择我们 ...

  8. AngularJS学习笔记

    一.初识AngularJS:1.Angularjs通过创建实时模板来代替视图,而不是将数据合并进模板后更新DOM,任何一个独立视图组件中的值都是动态替换的. 二.数据绑定和第一个AngularJS W ...

  9. 全端开发必备！10个最好的 Node.js MVC 框架

      Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服 ...

  10. [转]搭建高可用mongodb集群（二）—— 副本集

    在上一篇文章<搭建高可用MongoDB集群(一)——配置MongoDB> 提到了几个问题还没有解决. 主节点挂了能否自动切换连接?目前需要手工切换. 主节点的读写压力过大如何解决? 从节点 ...