<body>
　　<style type="text/css" rel="stylesheet">
　　　　html,body{
　　　　　　font-size: 16px;
　　　　}

　　　　p {
　　　　　　-webkit-margin-before: 2em;
　　　　　　-webkit-margin-after: 2em;
　　　　　　-webkit-margin-start: 0px;
　　　　　　-webkit-margin-end: 0px;
　　　　}

　　　　.select {
　　　　　　width: 50px;
　　　　　　height: 1em;
　　　　　　background: firebrick;
　　　　　}

　　　　#parent {
　　　　　　font-size: 25px;
　　　　}

　　　　#child01 {
　　　　　　width: 100px;
　　　　　　height: 10em;
　　　　　　background: darkgoldenrod;
　　　　}

　　　　#child02 {
　　　　　　width: 100px;
　　　　　　height: 10rem;
　　　　　　background: darkmagenta;
　　　　}
　　</style>
　　<div class="select"></div>

　　<p id="tag" style="float: left;">this is p</p>
　　<div id="parent" style="float: left;">
　　　　<div id="child01" style="float: left;">
　　　　　　<p>this is child01</p>
　　　　</div>
　　　　<div id="child02" style="float: left;">
　　　　　　<p>this is child02</p>
　　　　</div>
　　</div>

　　</body>
　　<script>
　　　　var tagEle = document.getElementById("tag");
　　　　var tagStyle = getComputedStyle(tagEle);
　　　　console.log(tagStyle["fontSize"]);
　　</script>

　　1.em的值不是固定大小；

　　2.em，rem会继承父元素的字体大小；

　　3.em在body中声明字体大小，rem在html中声明字体大小，

　　4.在-webkit-浏览器中最小13px，小于13px没效果。

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em换算px,rem换算px的更多相关文章

  1. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  2. 移动端的vw px rem之间换算

    一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...

  3. px自动换算rem

    //designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最 ...

  4. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  5. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  6. EM vs REM vs PX，为什么你不应该”只用px“”

    Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

  7. CSS中em、rem和px的区别

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...

  8. 简谈CSS 中的 em，rem，px，%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  9. 前端页面的适配使用rem换算

    前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/ann ...

随机推荐

  1. linux终端常用快捷键

    Ctrl + d       删除一个字符,相当于通常的Delete键(命令行若无任何字符,则相当于exit:处理多行标准输入时也表示EOF ) Ctrl + h       退格删除一个字符,相当于 ...

  2. iOS 如何打开后灯（闪光灯）

    - (void)torchOnOrOff { AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMedia ...

  3. 深入浅出RxJava

    深入浅出RxJava(一:基础篇) 深入浅出RxJava(二:操作符) 深入浅出RxJava三--响应式的好处 深入浅出RxJava四-在Android中使用响应式编程 RxJava 到底是什么? 一 ...

  4. U盘启动 WinPE系统维护工具 任意安装GHO/WIM/ESD系统映像 无广告专业版

    WinPE系统维护工具简介: 1.工具箱基于Windows 8 64位系统制作. 2.强大的DG分区工具专业版4.9.1(DOS版为4.9.0). 3.破解windows密码工具. 4.硬盘.内存检测 ...

  5. Codeforces Round #377 (Div. 2) B. Cormen — The Best Friend Of a Man（贪心）

     传送门 Description Recently a dog was bought for Polycarp. The dog's name is Cormen. Now Polycarp has ...

  6. MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案

    1.选中报错的jquery文件例如"jquery-1.8.0.min.js". 2.右键选择 MyEclipse-->Exclude From Validation . 3. ...

  7. APP开发+发布流程

    ios开发(证书+应用发布) 证书获取:http://newdocx.appcan.cn/newdocx/docx?type=1297_1291ios应用发布:http://newdocx.appca ...

  8. PHP Ajax 跨域问题最佳解决方案

    本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如果直接使用 ...

  9. Linux硬链接和软链接

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...

  10. 适配iOS10以及Xcode8

    现在在苹果的官网上,我们已经可以下载到Xcode8的GM版本了,加上9.14日凌晨,苹果就要正式推出iOS10系统的推送了,在此之际,iOS10的适配已经迫在眉睫啦,不知道Xcode8 beat版本, ...