<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. 使用 antd Table组件， 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  2. C/C++中的声明与定义

    含义 声明(Declaration), 用于告诉编译器被声明的函数/变量的存在, 及它们的类型/调用格式信息, 以检查是否被正确调用. 声明不分配内存空间. 定义(Definition), 用于告诉编 ...

  3. 泛型-List<T>

    声明一个int类型的泛型对象 List<int> list=new List<int>(); list.Add(44);//不用装箱 int i1=list[0];//也不会发 ...

  4. 【USACO 2.3】Money Systems（dp）

    v种货币,求有多少种组成和为n. dp[i][j]表示前i种货币价格为j有多少种方案,dp[i][j]+=dp[i-1][j-c]. http://train.usaco.org/usacoprob2 ...

  5. 经典KMP算法C++与Java实现代码

    前言: KMP算法是一种字符串匹配算法,由Knuth,Morris和Pratt同时发现(简称KMP算法).KMP算法的关键是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的.比 ...

  6. Introduction to Neural Machine Translation - part 1

    The Noise Channel Model \(p(e)\): the language Model \(p(f|e)\): the translation model where, \(e\): ...

  7. 友盟ionic多渠道自动签名app

    这几天公司的运营部门要求添加流量统计功能,集成了友盟的插件,中间遇到很多的问题,在这里说明记录一下,为遇到相同问题的朋友们减少麻烦 问题一.插件的使用直接将友盟sdk系在放置到项目根目录下plugin ...

  8. java -日期处理

    1. 计算某年某月份 总有多少个周,每周的开始和结束时间? 思路:1.计算出本月实际的总天数 2.循环每一天,判断这天是否是 周日(1),如果是,周数加1,再次判断是否是月的第一个周一,如是,开始时间 ...

  9. Apache Shiro 学习记录1

    最近几天在学习Apache Shiro......看了一些大神们的教程.....感觉收获不少.....但是毕竟教程也只是指引一下方向....即使是精品教程,仍然有很多东西都没有说明....所以自己也稍 ...

  10. js自动闭合html标签,自动补全html标记

    假如我有一个DIV,如果没有闭合后面的样式都会乱了,这样的代码可能会影响后面的样式,我希望用js去自动闭合这种没有闭合的标签: 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...