<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. redis-介绍与比较

    <一>. NoSQL简介:    NoSQL是Not-Only-SQL的缩写,是被设计用来替换传统的关系型数据库在某些领域的用,特别针对web2.0站点以及大型的SNS网站,用来满足高并发 ...

  2. 【poj1694】 An Old Stone Game

    http://poj.org/problem?id=1694 (题目链接) 题意 一棵树,现在往上面放石子.对于一个节点x,只有当它的直接儿子都放满石子时,才能将它直接儿子中的一个石子放置x上,并回收 ...

  3. bzoj 1065: [NOI2008] 奥运物流

    1065: [NOI2008] 奥运物流 Description 2008北京奥运会即将开幕,举国上下都在为这一盛事做好准备.为了高效率.成功地举办奥运会,对物流系统 进行规划是必不可少的.物流系统由 ...

  4. 1 云计算系列之云计算概述和KVM虚拟化简介

    为什么会出现云之传统数据中学面临的问题 物理服务器的利用率非常低,浪费资源,且资源分配不合理,比如一台服务器CPU使用率不到40%,或者某个应用需要的硬件配置低但是服务器硬件配置高等等. 云计算概念 ...

  5. 构建兼容浏览器的Angularjs web应用

    背景 随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值.赋值.绑定事件等,而mvv从底层实现了对以上操作的支持,让程序员 ...

  6. RDBMS DML DDL

    RDBMS RDBMS 指的是关系型数据库管理系统. RDBMS 是 SQL 的基础,同样也是所有现代数据库系统的基础,比如 MS SQL Server, IBM DB2, Oracle, MySQL ...

  7. HTML5视频播放

    1.检测浏览器是否支持html5视频播放 <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  8. ExtJs 实现表单联动

    最近做的项目使用Extjs.遇到表单联动的业务.下面来说说主要实现思想: 说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象.比如地理位置的选定(例:浙江省-杭州市-某某县).在这里,我 ...

  9. pyquery的问题

    在使用pyquery时发现一些问题, 1.爬取的html中如果有较多的错误时,不能很好的补全. 2.如果要获取某个class中的内容时,如果内容太多不能取完整!只能取一部分. 这个在现在的最新版本中还 ...

  10. ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了（转载）

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var mysql 启动不了   ps -A | gr ...